Most fundamental Ascpects of WordPress Theme Design

You might be shocked to understand that WordPress theme development is really not very hard one time you’ve got the hang of it.

In this post we’ll gaze at the different aspects of WordPress theme development, beginning with the fundamentals and then going swiftly up on the basics, template tags and the more sophisticated files.

The fundamentals 

A WordPress theme is made up of a number of distinct documents, and they all comprise a seperate section of the sheet; the header will contain the name and navigation, then the index will comprise the major content locality (or on a mail, the single document does the job).

The sidebar, obviously comprises the sidebar and the footer comprises the footer and closes off the HTML. This all noise very straightforward, but the significant bit is how you can just have a single document, change it once and you will change your entire location. Change your footer and that change will be echoed sitewise, not just on a lone sheet.

Want to create a WordPress driven internet message newsletter? No difficulty; just pop it in the sidebar document.

increasing on this, a mail page is made up of four documents (usually): the header.php file for the header, the single.php document for the mail content, the sidebar.php file for the sidebar and the footer.php file for the footer. You can have the identical header.php, sidebar.php and footer.php files for the entire location, and so when you make a change, this change arrives immediately sitewide.

The admin stuff 

Getting begun with WordPress theming can be a intimidating prospect, and before we start, I’ll state this now; I’m going to suppose a good solid understanding of both CSS and HTML. Good locations to gain this information are CSS-Tricks and Nettuts+.

A couple of things to sort out first – you’ll need to get yourself a cipher reviewer. If you’re using Windows, the free Notepad++ is an excellent tool to have and if you’re on a Mac then I’m sure there are abounding of large free reviewers, but the one that everyone talks wildly about is called Coda(and it’s not free). If you’re grave about design then Coda will be worth it in the long period. The only other fast thing we need to do is establish WordPress in the local area. You can find how to do that here.

Creating a basic theme 

First off, the style.css. This is our stylesheet. This isn’t a conceive series, so I’m not going to dwell on it too much, but there are some significant components of a stylesheet which WordPress needs that notify it some info about the theme. The theme we’ll be conceiving this week is called Champion. It’s founded on the Default WordPress theme for alleviate of use. Download the theme and unzip it. Open up the style.css document and you’ll see certain thing like this:

/* Theme Name: Champion

Theme URI:

Description: description

Author: Alex Denning

Author URI:

Version: 1.0 */

And that’s all you need to make a stylesheet WordPress-ified. After you’ve got that in a stylesheet, you can style as you would normally.

The index 

WordPress has lots of distinct template documents. They’re all used to develop distinct types of post, sheet, archive etc. A preceding mail interprets all, but to give you an concept

For mails, first, WordPress will look for the single.php document, but if it isn’t discovered then it will use the index.php to display the post.

For author archives, first WordPress will look for the author.php file, then the archive.php file and if it can’t find that it’ll use the index.php file to display the scribe archive. It’s the identical with all types of mail, sheet or archive; they all revert to the index.php. This is why it is the most important file of them all.

So let’s get begun. Open up the theme files again and open the index.php document. We don’t need any other files because as I’ve just sharp out, all kinds of sheet revert back to the index.php document so to verify the issue, in this part it is the only document we’re going to use. As the week goes on we’ll be supplementing more files back in, don’t worry! Open up the index.php file and look for line 49, which begins with:

<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

This is the WordPress Loop, and the most important part of any WordPress theme. This part is exciting; we’re using the most important template file and the most important part of any template file!

The loop explained 

So what is this Loop? It’s the thing that goes and fetches posts. With the loop started, look at the next couple of lines, ignoring the opening <div>s. They read:

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2> <?php the_content(); ?>

These are your very first template tags. Template tags are pieces of PHP (which always start and end <?php and ?>) which tell WordPress for the current post, get this piece of information. For example, the first template tag utilised here, the_permalink, tells WordPress for the present post, get the post permalink. Used interior an anchor and you’ve got yourself a connection to present post. The next template tag, the_title, as you might have guessed, outputs the name of the mail. Add that all simultaneously, interior an H2 tag and you’ve got yourself a name which when bangs proceeds to the post’s post sheet.

The last template tag overhead is the_content. This is tells WordPress for the present mail, proceed and find the contents of it and brandish it.

The next part of the file reads (again, disregarding the divs):

<?php endwhile; ?> <php next_posts_link(” Older Entries’) ?> <?php previous_posts_link(‘Newer Entries &raquo;’) ?> <?php else : ?> <h2>Not Found</h2> <p>Sorry, but you are looking for something that isn’t here.</p> <?php endif; ?>

The first part, endwhile notifies WordPress when you’ve completed displaying all the posts, display this:. What is brandished are links to older and newer applications utilising the template tags next_posts_link and previous_posts_link.

The next part, additional notifies WordPress if you can’t find any posts, brandish this:. You’ll glimpse that if no mails are discovered then a ‘Not discovered’ displays. eventually, endif finishes the loop.

So there we have it; the most important part of any WordPress theme; the loop. What we’ve also done is get introduced to template tags. There are quite a few to get yourself well known with, and you can find them recorded on the codex.

With the deciphering finished, load up the theme to your WordPress establish and trigger it. You’ll see that regardless of only having a stylesheet and a single index.php file, the theme burdens fine. bang on a mail and you’ll glimpse that gets displayed too. Pages, mail archives, class archives and any page you like work fine too. Going back to what I said earlier – all template document hierarchies drop back on the index.php document – this proves it.

This furthermore arises the inquiry – “if I can do all this with a lone document, why have more template files?” The answer is customisation. A change to the index.php file will be echoed all through the whole site, so if you just desire to change post pages then you wouldn’t be (easily, see à) adept to do this, which is why we have distinct template files (the pedantic might point out you could get around this with if declarations, which is factual, but it wouldn’t be particularly practical at the end of the day).

Separating the files 

Download the latest copy of our theme and open up the index.php file. First thing that you should notice is that the header has been restored with a part of PHP -

<?php get_header(); ?>.

This is another of WordPress’ template tags, and it’s telling WordPress proceed into the theme documents, find the header.php file and display the contents here. As your theme becomes more and more perplexing, this permits you to conceive a single header and use it all through your topic. At this point, you’re likely unfastening up the header.php file. Good concept! Upon opening it, you’ll glimpse it’s the identical thing we had beginning off our index.php document. All that has altered is now it has a entire document to itself.

Deciphering the header 

Before we move on, a couple of important header points. You’ll notice that the header doesn’t display things like your content type, it uses template tags (I did say there were lots!) such as:

<?php bloginfo(‘html_type’); ?>

When this burdens, what is brandished is your HTML type – have a look at the source cipher yourself – text/html gets shown. Template tags such as this one are utilised all through the header to get the stylesheet url, title, pingback url etc etc. The reason for this is because every WordPress installation is distinct and so by using dynamic template tags, you can cater for all of these different installations at once.

The sidebar 

Look back in the index file and you’ll see that the sidebar has gone too, and its place <?php get_sidebar(); ?>. Like the header, this tells WordPress go into the theme files, find the sidebar.php file and display the contents here. There’s not much to decipher here; a couple of new template tags and only one completely new thing: widgets, which we’ll discuss further in the last part as it requires the functions.php file.

The footer 

The final part of this part’s instalment is going to look at the footer. Like the header and sidebar, it has been removed from the index.php file and now resides in the footer.php file. Again, it is referenced with the <?php get_footer(); ?> function. Nothing much new here; again some more new template tags, but other than that it’s much the same as the index.php file’s footer we had before.

Developing the single.php file 

Upon opening the single.php file, it should look pretty familiar; the first line is <?php get_header(); ?> which, as we learnt in the previous part, tells WordPress find the header.php file and display the contents here. Skip a line and you’ll see:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

That too should look familiar; it’s the loop! Scroll down further and you’ll see a couple of template tags -

<?php the_title(); ?>


<?php the_content(); ?>

. After that, scroll down to line 35 and you’ll meet a new template tag:

<?php comments_template(); ?>

Just like get_header, get_sidebar and get_footer, this tells WordPress go and find the comments.php file and display the contents here. You can probably guess where this is going – get the comments.php file open.

Getting to grips with WordPress’ comments 

Open it up and… eek! It’s perplexing. The remarks file is infamous for being the thing that must be done but no-one actually likes doing. But that isn’t going to stop us, is it? No. Let’s get going. The first part of the cipher just checks to glimpse if the comments file has been loaded exactly, and if it has an mistake note gets brandished. Next, it tests to see if the present mail is password defended, and if it is then the user is inquired to go in a password to glimpse the sheet. depart this bit of code alone; it’s important it is kept and, well, what has it ever finished to you?

Next is the bit we’re involved in: the remarks loop. It starts by ascertaining if remarks are open

<?php if ( have_comments() ) : ?>

And if they are then some text is displayed, showing the number of comments a post has. Skip a couple of lines to line 28 where an ordered list is opened and inside that ordered list is <?php wp_list_comments(); ?>.

This is another of WordPress’ template tags, and it spits out all of a post’s remarks. There are other ways of displaying remarks (that offer more customisation), but that is a mail for another day; as I said, it’s quite a perplexing subject.

Gloss over the next part (which is pretty self explanatory) to line 49. Here starts the pattern that you glimpse on most blogs – this is the part where you load up out your name, internet message, website and comment. There isn’t actually much need to customise this or change it in any way, so we won’t. Instead, we’ll go back to the single.php document and complete up with that.

Finishing off posts 

Open up the single.php document again and scroll down to line 37, just after where we left off. Here is something that afresh should look equitably well known; it’s the loop completing off and saying if no mails are found then brandish this:. The

<?php endif(); ?>

closes off the loop and then we get to the familiar looking get_sidebar and get_footer, which we learnt about in the previous installment of the series.

Creating a page 

This tutorial has focused heavily on mails, without a mention of sheets. The good report is that pages run equally to mails and so to conceive a post sheet, all you have to do is save another copy of your single.php file as page.php. And you’re finished. I did state it was simple!

Creating an awesome archive 

According to the WordPress document hierarchy (which we considered earlier), all archives – date, class, scribe and tag each have their own template file, but they furthermore all drop back on a single file – the archive.php file. The idea here is that if you’re quick-witted, you can save yourself conceiving a twosome of additional files.

Upon unfastening the document, you’ll be greeted with the well known get_header and the loop. Then, on line 14 starts a entire burden of PHP if declarations – if this is a class archive, brandish this, if this is a tag archive, display this etc etc. After that, on line 37 the loop swings into action and we have the familiar template tags we discovered in part two. Finally, on line 56 the standard “no posts were discovered” gets replaced with another if declaration, altering it to “no posts were found under this category/tag etc etc”. After that, the well known get_sidebar and get_footer and the archive page finishes.

It’s attractive alike to the index.php sheet, all that is occurrence is that there are a twosome of ifstatements to change the names according to the archive.

Creating an equally awesome homepage 

certain thing you might have observed is that so far we haven’t conceived a specific homepage. Whilst there is a homepage, that’s just the contents of the index.php document. At this issue, it’d be appropriate to insert a new template file: the home.php document. It’s largest in the hierarchy for the homepage, so WordPress first looks for the home.php file and if that doesn’t live then it uses the index.php, which is why so far we’ve so far been conceiving a homepage with just the index.php.

Why can’t I just use the index? 

Good question. You can’t because the catalogue file is at the base of all template hierarchies – if you don’t have a exact template file for a certain kind of page then WordPress exhibitions the page utilising the index.php file. For that reason it is best to depart the index document as it is and conceive an additional sheet, home.php for generating a homepage. It’s furthermore one of those useful little tricks that are good to understand as it allows you to halt using WordPress as a blogging stage and start utilising it as a CMS. You can also try out adorned tricks utilising purposes like WordPress’ body_class.

In our example, we’re not going to do any thing with our home.php file, other than make it and exact replicate and paste the contents of the index.php file into it, but as someone who is getting begun with WordPress theme development, it is something that you should understand lives and you’ve always got the choice of customising the homepage farther yourself.

The functions.php file 

This is probably the most mighty template file there is. Effectively, it permits you run plugins from inside your theme. It’s not a sheet that gets brandished, it’s a file that permits you run purposes that you can display in other documents. Common benefits include:

Widgets! while you put where you desire widgets to brandish in the theme documents, but they’re driven from the functions.php document.

Theme choices. Theme choices sheets are too created from the functions.php document. ABC has a whole tutorial in writing on the theme here.

dialect – the functions.php file permits you set up the option for multi-lingual theming.

As the functions document is just so convoluted, I’ll just cover some basics. The code underneath will create a widget locality ‘Widget locality 1’ with an unfastening div before (which closes after) and the widget name gets an H3 tag:

<?php if ( function_exists(‘register_sidebar’) ) register_sidebar(array( ‘name’ =>

‘ Widget area 1′, ‘before_widget’ => ‘<div>’, ‘after_widget’ => ‘</div>’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, )); ?>

To insert the widget in your sidebar you’ll need to add the following to your sidebar.php file (or wherever you want to widgetise):

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Widget area 1′) ) : ?> <p>This area is widgetised! To make use of this area, put some widgets in the ‘Widget area 1′ section.</p> <?php endif; ?>

This is just the start though; take a read of thisto find out how to build your own theme options page.

Concluding the series 

I wish this sequence has granted you a good start with evolving WordPress themes, and make certain you subscribe by RSS to hone your abilities farther. As I hope I’ve proved in this mail, it needn’t be hard to become cognizant of what all the morsels of code on your theme do, and you not ever know, possibly in a year or two I could be reading your blog about advanced benefits of WordPress!


Leave a Reply