So what is a child theme?

To begin we must first talk about what a regular theme in Wordpress is. A theme is any design that you create and place in the Wordpress theme folder. Of course there is a specific structure to have and a specific style sheet code that must be in place in order for your theme to be recognized by Wordpress.

With that in mind, a Wordpress theme generally contains a core set of files and a style sheet that provides the rules of the design. There are times when you search online for themes and find one that you like. Then you proceed to modify it to your needs. But what if there was a better way to modify a theme you liked without touching the core files?

The child theme

Here is where child themes come into a play. A child theme is a theme that inherits everything from your main theme, but only contains a style sheet and a functions file. This allows you to edit your favorite theme without touching the core files. To better illustrate this we have an example pictured.

You core theme or favorite theme or even your blank theme sits in your Wordpress theme folder. You then create a child theme folder with your two files and start designing. This allows you to create multiple child themes relying on one core theme as the framework. You don’t have to touch your core files ever again.

This concept may sound abstract but once your start building your own child theme, this concept may turn into an epiphany.

Core files in a child theme:

• style.css (your style sheet)
• functions.php (extra code to help modify your theme)

A traditional them will contain ten or more files that make up the core, the child theme borrows those files from another folder but relies only on the style sheet and the functions file for the main design. If you have read tutorials on how to create a theme, you should realize what the benefits are of having a child theme. In a future lesson I’ll go into the details on how to create your first child theme.

Click here for the previous tutorial.

If you followed the instructions of the previous tutorial, then you have already created a custom page with no sidebar. What we need to make sure of is that this custom page we create has a blank space of at least 800px.

Once your custom page is created with no sidebar, then all you do is create a new page in your admin section and paste your Amazon aStore code into the post. Make sure that you have selected the “HTML” view instead of “Visual”. Otherwise it won’t work properly. You can adjust your iframe settings in the code to fit your page the best and then publish your page. And that is all there is to it. Enjoy.

In this example we are going to create a simple custom page with no sidebar.

Step 1 (The most important code of the custom page)

The part that matters the most is the “Template Name”. This can be anything you want. Once you name it, it will be listed as a template under your page templates.

1
2
3
4
5
6
7
8
9

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
/*
Template Name: Your Custom Page Name
*/
?>

Step 2 (Your custom code)

In this example we have taken the original code from the default Wordpress page.php file and made 2 changes. First we removed the sidebar code at the bottom and secondly we renamed the class to “widecolumn”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php get_header(); ?>
 
	<div id="content" class="widecolumn" role="main">
 
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
 
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div>
 
<?php get_footer(); ?>

Step 3 (Add your CSS)

Here you basically create your css code to take advantage of your current theme. The main code you create will use the class “widecolumn” to set the rules for the page. This will all depend on your theme specifics.

Step 4 (Apply the Template to a Page)

This final step is very simple. Once you create your new page in Wordpress, you simply apply the Template from the template’s drop down menu.

Summary

This demonstrates a simple way to create a wide page with no sidebar. However, you don’t have to be limited to just this. You can also create a regular HTML page with some CSS and have it display as a custom page. It’s all limited by your imagination. All you have to do now is experiment and design. Thanks for reading.

This tutorial is based on Wordpress 2.8.4 core files.

Core php files to have

The required core files that will allow you to build a bare bones minimum blank theme are as follows:

• 404.php
• archive.php
• comments.php
• footer.php
• functions.php
• header.php
• index.php (this is the main file)
• page.php
• search.php
• sidebar.php
• single.php

Additional useful php files

• archives.php (note this is different from archive.php)
• yourcustom.php (your own custom pages)
• searchform.php (your custom search form)

Building your blank theme

1. Create a new folder and call it “blank-theme”. Remember don’t use spaces when naming your folders, this can cause undesired results if you upload the folder.
2. Copy over the core files from theme “classic”.
3. Edit header.php and functions.php as shown below.
4. Create your style.css file

Why edit header.php and functions.php?

With theme “classic” there are extra features built into the theme. What we need to do is strip theme extra features to get a bare bones theme.

Edit header.php

Original code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
<style type="text/css" media="screen">
 
<?php
// Checks to see whether it needs a sidebar or not
if ( empty($withcomments) && !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
 
</style>
 
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">
 
 
<div id="header" role="banner">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

Remove:

1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css" media="screen">
 
<?php
// Checks to see whether it needs a sidebar or not
if ( empty($withcomments) && !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
 
</style>

New code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">
 
<div id="header" role="banner">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

Edit functions.php

Only code you need:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
automatic_feed_links();
 
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));
}
 
?>

Creating your style sheet

In order to create your blank theme you need to supply some important details in this file. This will define your theme.

Important Style Sheet Information

1
2
3
4
5
6
7
8
9

/*
Theme Name: Make up any name here
Theme URI: http://yoursite.com/
Description: Type some description here.
Version: 1 (or any number you want to type here)
Author: Your name
Author URI: http://yoursite.com/
Tags: your, custom, tags, here
*/

Once you have this information supplied, you can go into your admin section and activate your theme. Once activated, you can start to fill in your CSS code to style your blank theme the way you want it. Then you can just re-use your blank theme to build future themes based on this bare bones theme.

If you want to download the bare bones core Wordpress files, go to the “Freebies section” of my website and download them there. Alternately, you can click here.

Finally if you want to have a screen shot of your bare bones theme, just do a screen capture or make your own image and save it as “screenshot.jpg”. The extension could be .jpg, .gif, or .png. It really doesn’t matter as long as you name it “screenshot”. Ideally your dimensions should be 300 x 225. After that, you can start enjoying your new blank theme.

History of the Internet from PICOL on Vimeo.

In this tutorial I’ll go through the steps on how to turn your home computer into a server and then how to setup Wordpress on it. Keep in mind that this is a Windows based tutorial.

Requirements:

• Fresh copy of Wordpress (you can download here)
• Copy of wampserver (you can download here)

I know there are various open source and built in programs that will turn your home computer into a server, however, as a personal preference this tutorial will be based on Wampserver. I have tried other programs out there, but this is just a personal favorite. You are free to use any program you prefer.

Step One (Server Install)

The first thing to do is download wampserver and then execute it. The setup is self explanatory and it should setup in about a minute or two. Once installed run the server program by double clicking the wampserver icon.

Step Two (Server Configuration)

Since the installation is on your home computer, I’m assuming this is for testing purposes only, we will leave the default settings enabled. This means that the user name will remain as “root” and the password will be left blank. If you plan on using wampserver for web hosting, then I recommend you go in and change the default user name and password.

For now we are going to use these default settings to setup the MySQL database. This preparation is required in order to install your Wordpress site to the database. Clicking on the server icon in the system tray will bring up a menu like the one displayed here.

Click on “phpMyAdmin”. This brings up the phpMyAdmin interface. You will see an empty box titled “Create new database”. Type a name for your database. Any name will do. In this example we can call it “wordpress”.

Once that is done you can exit phpMyAdmin. No further action is required in the database.

Step Three (Wordpress Installation)

Here is the easy part. Download a copy of Wordpress, extract the files and place them in your “www” directory. The way you get to it is by clicking on the “Wamp” icon in the system tray and selecting “www directory”.

Once the folder opens, just paste your wordpress files in it. Next click the “Wamp” icon again and select “localhost”. This will bring up the main Wampserver index page. Scroll down the page to see “Your Projects”. There you’ll see “wordpress”.

Click on “wordpress” and then it will walk you through its famous 5 minute installation. Here is the information you will need to complete this setup:

database name: wordpress (this is the name we typed in phpMyAdmin)
username: root (this is the default MySQL username)
password: (leave this blank, the default server setup doesn’t have one unless you create one)
host: localhost (this is the address where your database is hosted)

And that should be it. Once this information is filled in, then you can complete the installation with your own personal testing details. Finally you open your browser and enjoy your new setup.

Browsers

When developing a website, it’s always good to maintain a set of browsers for testing purposes. The following are some recommended browsers:

• Firefox (good for plugin installs and extending capabilities)
• Safari
• Internet Explorer (some form of it, best to have 6, 7, or 8)usually built into Windows

CSS Tools

Both of the tools listed below are great for CSS development. I currently favour Firebug, but I recommend trying both and seeing which one you prefer. A quick view at their websites will display some of their great features.

• Firebug
• Web Developer tool bar

FTP and Server

I highly recommend both of the tools below for web transfers and website testing, mainly because they are free and good quality products.

• FireFTP (This is an extension of firefox and is cross-platform compatible, should work on any OS with Firefox)
• Wampserver (This is mainly a Windows based server)

And finally, what program can you use for creating the XHTML and CSS? The easiest program to use in Windows is notepad, however there are many text editors online which will add extra bells and whisels. The only recommendation I will make here is for Mac OS X: Textwrangler. It used to be BBedit, but this is now the new free version which does a good job. These should be enough to get any web develop up and running.

Before you begin coding your style sheet you must supply the following information at the top of your sheet. You can just copy and paste the code, then modify it with your own information.

1
2
3
4
5
6
7
8
9

/*
Theme Name: Your theme name goes here
Theme URI: http://www.yourthemewebsite.com
Description: Some description about your theme goes here
Author: Your name or the author name
Author URI: http://www.yourthemewebsite.com/
Version: 1.0
Tags: Some tags go here
*/

Once you have entered the above details you can then begin styling your new theme. Here are some quick tips for novices wanting to write their own. You could always copy and paste the default style sheet from the themes folder or you can create your own.

Some fundamentals would be to reset the browser settings in order to give you full control of all padding and margins of the browsers. You do this with the following code:

1
2
3
4

* {
  margin: 0;
  padding:0;
}

What this rule does is sets all margin and padding settings to zero. After that you can then start to take control of your headings, paragraphs, forms and every element of your theme.

If this is too much to begin with, then you can always start off with some pre-made themes and style sheets. Here are some useful links to begin with:

• Blank Wordpress themes by Refueled (I recommend this one for novice beginners who just want to modify a theme to their own liking)
• Additional Blank themes by various authors (These themes are probably for those developers who want to do a little more.)
• Wordpress Codex Page (Always a good starting point to learn more about Wordpress structures and templates.)