In this lesson we’ll finally get started with creating files, write some code and activate the theme in WordPress so we can see it in action. We will begin with very basic HTML and some dummy content, but we’ll establish the structure and begin to query WordPress for some information such as the blog’s name and stylesheet directory. In later lessons we’ll query WordPress for much more information, such as posts and widgets.

In the previous lesson I showed you the design and the HTML structure (Click here for the visual representation given in the previous lesson) we are to create, and how it is split into separate files – the header.php, sidebar.php and sidebar.php, and the core index.php template which includes the previously mentioned templates. We also need to create the stylesheet, style.css because all the details of a WordPress theme are contained within the stylesheet.

Creating the Theme Files and Start Writing

In a file browser, find your WordPress root folder and navigate to the wp-content » themes folder. All folders you see here are themes, and you should at least see the default WordPress themes, classic, default and twentyten. Inside the themes folder create a new folder and give it a name, a short name without spaces and preferably no numbers. I named mine wpthemetutorial.

Open your recently created wpthemetutorial folder and create four new empty files: index.php, header.php, sidebar.php, and footer.php. All files should have the file type .php and those names exactly. These files are our four core files which in total results in a full and valid web page.

In this lesson we will fill each one of the four files with the most basic and necessary HTML. We will flesh out the files in later lessons. The code samples below contain mostly standard HTML code for a web site, but also some WordPress interaction. I’ll explain what these WordPress functions do after each code sample. Let’s begin at the top – the header.php file.

header.php:

<!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">
	<head profile="http://gmpg.org/xfn/11">
		<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
		<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
	
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

		<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
		<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
		<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<?php wp_get_archives('type=monthly&format=link'); ?>

		<?php wp_head(); ?>
	</head>	
	<body>
		<div id="top-container">
			<div id="header">
				<h1><a href="<?php bloginfo('url'); ?>" title="Home"><?php bloginfo('blog_name'); ?></a></h1>
			</div>

			<div id="content-wrapper">
				<div id="content-top">&nbsp;</div>

Apart from the default doctype and HTML tags that make up the start of a website, there are some PHP content that queries WordPress for certain things. Pretty early on we meet our first WordPress function: bloginfo(). This function is used for querying general info about the blog installation by setting a desired parameter to the function call. In this file we use bloginfo() to get the blog’s name, the path to our stylesheet, the WordPress version, and feed paths by providing the corresponding arguments. Notice that bloginfo() is one (of many) WordPress functions that by itself echoes the result, which means we don’t need to put echo before it.

The wp_title() is a WordPress function which will query which page the user are at, and return the title of the post or page, archive or whatever else. We also add the blog’s name right before the page-depending title, creating meaningful (and search-engine friendly) titles wherever you go on your blog. Don’t worry about creating a space or separator between wp_title() and the blog’s name, wp_title() will append a space and a » before echoing. Take a look at arguments to this function if you want to modify its output.

Another take on making your theme search-engine friendly is the wp_get_archives(), which with the argument format=link will print out the archives in <link> format.

The wp_head(), located right before closing the <head> tag, is a WordPress hook. If you recall the previous lesson, hooks are places in the code where WordPress and plugins can hook onto and add additional output. The wp_head() hook is the hook where plugins and WordPress can add stylesheets, scripts and other information inside the <head> section. It’s very important to always include wp_head() in your themes, for without it your site may break whenever a plugin tries to load or do something since it’s missing scripts and stylesheets.

WordPress Function Reference:

index.php:

<?php get_header(); /* Tells WordPress to include header.php */ ?>

				<div id="content">
					<p>The loop of posts will be placed here</p>
				</div>

				<?php get_sidebar(); /* Tells WordPress to include sidebar.php */ ?>
<?php get_footer(); /* Tells WordPress to include footer.php */ ?>

As mentioned before, the index.php is the core file which will include the header, sidebar and footer. We do so by using the WordPress functions get_header(), get_sidebar() and get_footer(). If you’re familiar with using PHP in web development, these functions are in fact just the same as calling include().

The three calls to the templates will always query your theme folder, and the file names have to be spelled correctly in order for WordPress to find them: header.php, sidebar.php and footer.php.

Later we will fill this file with some meaningful content, such as a loop querying posts from WordPress, but as for now our content will be a single dummy paragraph.

WordPress Function Reference:

sidebar.php:

				<div id="sidebar-wrapper">
					<div id="sidebar">
						<p>Sidebar elements here</p>
					</div>
				</div>

The sidebar is pretty simple for now, with no WordPress function calls whatsoever. We include the <div>s so we can target them with CSS. Later we will fill it with meaningful content and support for widgets.

footer.php:

				<div style="clear:both;"></div>
			</div> <!-- end content-wrapper-->
		</div> <!-- end top-container-->
		
		<div id="bottom-container">
			<div id="footer">
				<p>Copyright &copy; <?php bloginfo('name'); ?> <?php echo date('Y'); ?> | <a href="mailto:<?php bloginfo('admin_email'); ?>" target="_blank">Admin e-mail</a>.</p>
				<p>Powered by <a href="http://wordpress.org" target="_blank" title="Wordpress.org">WordPress</a></p>
				
			</div>
		</div>
		<?php wp_footer(); ?>
	</body>
</html>

In the footer we print some basic information and make sure we close all <div>s as well as <body> and <html>. Later on we will define widget areas here, but as for now we print some default information, such as copyright info, admin email and credit to WordPress. We use bloginfo() again to get the blog’s name and PHP date to make sure the year is always the current year after the copyright notice.

The wp_footer() is another WordPress hook, just like wp_head() in our header file. The wp_footer() is similar to wp_head() as it’s used by WordPress and plugins to echo out additional information, normally javascript libraries and scripts for site analytics. The same goes as for the wp_head(), it’s important to remember the wp_footer() hook in your themes.

WordPress Function Reference:

Telling WordPress That This is a Theme

All WordPress themes are defined in the style.css. It’s in here WordPress gets the theme name, and more information such as author and description. We need to add a certain code so WordPress recognizes our folder as a theme. The CSS for styling our site will be written later.

By now we should have four php files filled with some content in our theme folder. Create a new empty file, named style.css.

At the very beginning of our empty style.css, inside CSS comments /* and */, you need to tell WordPress what your theme name is. The tag Theme Name is the only mandatory line, but it’s nice to provide more information about your theme, such as author info, a description and/or tags. Fill in your desired values after each tag, replacing mine values:

style.css:

/*
Theme Name: My WP Theme Tutorial
Theme URI: http://www.acornartwork.com
Description: A starting theme following a tutorial at acornartwork.com
Author: @nnci
Author URI: http://www.acornartwork.com
Version: 1.0
*/

After this piece of code (after the closing comment */) we will later write all our CSS code. But not until later in this tutorial, so you don’t need to add anything more to this file now. Right as you save this file our theme folder should be recognized by WordPress as a theme.

Activating The Theme

In your theme folder you have a file named index.php and a file named style.css which contains at least the theme’s name, so WordPress should now recognize your folder as a theme. It’s time to activate our theme in WordPress.

In WordPress Admin, navigate to Appearance » Themes. You should get a list of all installed themes, sorted alphabetically. Find your theme by the name given in style.css and click “Activate”. If the activation was successful, visit the front-end of your WordPress implementation, and see what you get. You should only see our dummy sentences in a poorly styled web page, but the HTML structure is in place and all we need to do now is to replace the dummy sentences with some actual WordPress content.

This concludes Lesson 2 of the WordPress Theme Tutorial. Go to the next lesson, The Loop and Basic CSS, or back to the tutorial’s Table of Contents.

Share this post:
FacebookTwitterEmailShare