Basics Of WordPress Theme Design

A WordPress topic is made up of a number of different files, and they all comprise a seperate part of the sheet; the header will comprise the title and navigation, then the catalogue will comprise the major content area (or on a post, the lone document does the job).

The sidebar, conspicuously 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 lone document, change it one time and you will change your whole location. Change your footer and that change will be reflected sitewise, not just on a lone sheet.

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

Expanding on this, a post 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 document for the sidebar and the footer.php document for the footer. You can have the same header.php, sidebar.php and footer.php files for the entire site, and so when you make a change, this change arrives directly sitewide.

The admin stuff
Getting started with WordPress theming can be a daunting prospect, and before we start, I’ll say this now; I’m going to suppose a good solid comprehending of both CSS and HTML. Good places to gain this knowledge are CSS-Tricks and Nettuts+.

A twosome 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 very good device to have and if you’re on a Mac then I’m sure there are abounding of large free reviewers, but the one that every person talks wildly about is called Coda(and it’s not free). If you’re grave about conceive then Coda will be worth it in the long period. The only other fast thing we need to do is install WordPress in the local area. You can find how to do that here.

Conceiving a basic topic
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 desires that notify it some info about the theme. The topic we’ll be creating this week is called Champion. It’s founded on the Default WordPress theme for alleviate of use. Download the topic and unzip it. Open up the style.css file and you’ll glimpse something like this:

/* Theme Name: Designimo

Theme URI: http://wordpress.org

Description: A basic wordpress theme

Author: Hasibul Islam

Author URI: http://webdeveloperszone.com

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 commonly.
The index

WordPress has allotments of different template files. They’re all utilised to develop distinct types of post, page, archive etc. A preceding post interprets all, but to give you an idea

For posts, 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 mail.

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

So let’s get started. Open up the topic files afresh and open the index.php document. We don’t need any other files because as I’ve just sharp out, all kinds of page revert back to the index.php file so to verify the issue, in this part it is the only document we’re going to use. As the week moves on we’ll be supplementing more files back in, don’t concern! Open up the index.php file and gaze for line 49, which starts 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 actual aboriginal arrangement tags. Arrangement tags are pieces of PHP (which consistently alpha and end ) which acquaint WordPress for the accepted post, get this section of information. For example, the aboriginal arrangement tag acclimated here, the_permalink, tells WordPress for the accepted post, get the column permalink. Acclimated central an ballast and you’ve got yourself a hotlink to accepted post. The next arrangement tag, the_title, as you ability accept guessed, outputs the appellation of the post. Add that all together, central an H2 tag and you’ve got yourself a appellation which if clicks goes to the post’s column page.

The final arrangement tag aloft is the_content. This is tells WordPress for the accepted post, go and acquisition the capacity of it and affectation it.

The next part of the file reads (again, ignoring 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 tells WordPress when you’ve completed displaying all the posts, brandish 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 mails, display this:. You’ll glimpse that if no posts are discovered then a ‘Not discovered’ exhibitions. Finally, endif finishes the loop.

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

With the deciphering finished, load up the topic to your WordPress establish and cause it. You’ll see that regardless of only having a stylesheet and a lone index.php file, the topic burdens fine. bang on a mail and you’ll glimpse that gets displayed too. sheets, mail archives, class archives and any page you like work fine too. Going back to what I said previous – 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 single document, why have more template files?” The answer is customisation. A change to the index.php document will be reflected all through the whole site, so if you just desire to change mail pages then you wouldn’t be (easily, see à) adept to do this, which is why we have distinct template documents (the pedantic might point out you could get aaround this with if declarations, which is factual, but it wouldn’t be especially practical at the end of the day).

Dividing the files
Download the latest exact replicate of our topic and open up the index.php file. First thing that you should observe 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 brandish the contents here. As your theme becomes more and more perplexing, this permits you to conceive a single header and use it throughout your topic. At this point, you’re likely opening up the header.php file. Good idea! 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 whole document to itself.
 

Deciphering the header
Before we move on, a twosome of important header points. You’ll observe that the header doesn’t brandish things like your content type, it values template tags (I did state there were lots!) such as:

<?php bloginfo('html_type'); ?>

When this loads, what is displayed is your HTML type – have a look at the source code yourself – text/html gets shown. Template tags such as this one are used throughout the header to get the stylesheet url, title, pingback url etc etc. The reason for this is because every WordPress installation is different 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(); ?>

and

<?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 complicated. The comments file is notorious for being the thing that must be done but no-one really likes doing. But that isn’t going to stop us, is it? No. Let’s get going. The first part of the code just checks to see if the comments file has been loaded directly, and if it has an error message gets displayed. Next, it checks to see if the current post is password protected, and if it is then the user is asked to enter a password to see the page. Leave this bit of code alone; it’s important it is kept and, well, what has it ever done to you?

Next is the bit we’re interested in: the comments loop. It starts by checking if comments 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 comments. There are other ways of displaying comments (that offer more customisation), but that is a post for another day; as I said, it’s quite a complicated subject.

Gloss over the next part (which is pretty self explanatory) to line 49. Here starts the form that you see on most blogs – this is the part where you fill out your name, email, website and comment. There isn’t really much need to customise this or change it in any way, so we won’t. Instead, we’ll go back to the single.php file and finish up with that.

Finishing off posts

Open up the single.php file again and scroll down to line 37, just after where we left off. Here is something that again should look fairly familiar; it’s the loop finishing off and saying if no posts are found then display 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 posts, without a mention of pages. The good news is that pages run identically to posts and so to create a post page, all you have to do is save another copy of your single.php file as page.php. And you’re done. I did say it was simple!

Creating an awesome archive

According to the WordPress file hierarchy (which we discussed earlier), all archives – date, category, author and tag each have their own template file, but they also all fall back on a single file – the archive.php file. The idea here is that if you’re clever, you can save yourself creating a couple of additional files.

Upon opening the file, you’ll be greeted with the familiar get_header and the loop. Then, on line 14 starts a whole load of PHP if statements – if this is a category archive, display 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 learnt in part two. Finally, on line 56 the standard “no posts were found” gets replaced with another if statement, changing it to “no posts were found under this category/tag etc etc”. After that, the familiar get_sidebar and get_footer and the archive page ends.

It’s pretty similar to the index.php page, all that is happening is that there are a couple of ifstatements to change the titles according to the archive.

Creating an equally awesome homepage

Something you might have noticed is that so far we haven’t created a specific homepage. Whilst there is a homepage, that’s just the contents of the index.php file. At this point, it’d be appropriate to introduce a new template file: the home.php file. It’s highest in the hierarchy for the homepage, so WordPress first looks for the home.php file and if that doesn’t exist then it uses the index.php, which is why so far we’ve so far been creating a homepage with just the index.php.

Why can’t I just use the index?

Good question. You can’t because the index file is at the bottom of all template hierarchies – if you don’t have a specific template file for a certain type of page then WordPress displays the page using the index.php file. For that reason it is best to leave the index file as it is and create an additional page, home.php for generating a homepage. It’s also one of those useful little tricks that are good to know as it allows you to stop using WordPress as a blogging platform and start using it as a CMS. You can also try out fancy tricks using functions like WordPress’ body_class.

In our example, we’re not going to do anything with our home.php file, other than make it and copy and paste the contents of the index.php file into it, but as someone who is getting started with WordPress theme development, it is something that you should know exists and you’ve always got the option of customising the homepage further yourself.

The functions.php file

This is probably the most powerful template file there is. Effectively, it lets you run plugins from within your theme. It’s not a page that gets displayed, it’s a file that lets you run functions that you can display in other files. Common uses include:

    Widgets! Whilst you put where you want widgets to display in the theme files, but they’re powered from the functions.php file.

    Theme options. Theme options pages are too created from the functions.php file. WPShout has a whole tutorial written on the topic here.

    Language – the functions.php file lets you set up the option for multi-lingual theming.

As the functions file is just so complex, I’ll just cover some basics. The code below will create a widget area ‘Widget area 1’ with an opening div before (which closes after) and the widget title 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.