Design a Wordpress 2.7 Theme – Day 1 : Structure and Heading
Introduction
The first thing to consider when designing a Wordpress theme is to think about the layout of site. Who is it for, why do they need it, how many columns, what colours? For this tutorial, I will be working on something to give away for free on this site ( a sort of follow-up to the series). I cant decide on your design, so you will have to get all of these beforehand.
The Heading
So to start, open up Dreamweaver (or any other IDE) and create a PHP file and name it index.php. Then create a CSS file and name it style.css. In you index.php, there will be some text already in your code. Take every thing out of the <head> tag and substitute it for the following:
<?php wp_title (); ?> – This gives dynamic info as the Page Title. This is extremely useful for SEO as it changes for every post.
<?php bloginfo(‘template_directory’); ?> & <?php bloginfo(’stylesheet_url’); ?> – This just gives the location of the template directory and stylesheet. The first one is useful if you need to add a second CSS file (like I will be doing soon), JavaScript file, or an image.
<?php wp_head(); ?> – This exports the files Wordpress and its plug-ins needs to the HTML. Some of this include widget specific CSS, J-Query embedding, or just new title-bar text.
Stylesheet setup
Head into style.css and remove everything inside it. Now because WP uses the stylesheet for all the template metadata (Useful Information), it is vital that you write this code correctly.
This just gives data, like the version of the template, template name etc… You can edit it accordingly. This is all we will be doing in the CSS today, we will not go that far so soon. For now, we will just work on the HTML.
The Basic Structure.
Ok now we are going to write the basic structure of our theme. We are not going to be implementing CSS just yet. I like to use a blank file with all this code already written but you can see it all here. Put all of this into the <body> tag.
This is just basic formatting, feel free to change it around as much as you like, just remember what id’s you use to make sure you don’t get confused with mine. Most of it is self-explanatory. However you will notice I have added a few PHP phrases <? wp_list_pages(‘title_li=&depth=1′); ?> – This prints out links for our menu. This is often an overlooked part of designing a Wordpress theme, but it makes things easier in the long run. “depth=1” Makes sure that no sub-pages are seen. If you want to remove that go ahead but for this theme, I’m leaving it out <? bloginfo(‘url’);?> & <? bloginfo(‘name’);?> – This are handy tags to print out the URL and Name of the blog.
Testing
Now upload these files onto your web server in a folder in your wp-content/themes/ folder. Now enable your theme in the Backend and see if things are correct. You should see a page with your site name and a list of your pages, with no styling, and a footer with copyright information.
Conclusion
So at the end of this lesson you should:
- Be familiar with the PHP involved in the <head> tag
- Have the metadata implemented in the CSS
- Have a basic webpage structure ready for CSS Styling
Your HTML Page should look like this
Next
On Day 2 of our Design a Wordpress 2.7 Theme, we will be covering the loop and other php snippets to go into our theme. Make sure you Subscribe to my RSS, if you don’t want to miss the rest of these posts. Also please go back and have a look at the other tutorials in the post.
The meta generator info in the header is actually a security risk. If someone wants to hack your blog, telling them not only that you are using WordPress, but what version you are running is doing their homework for them.
I just started going through your tutorial which was very informative for someone trying to get to grips with designing for Wordpress and noticed that on the Day 1 page the Body Text and Day One Text were not found, any chance you could help me out with this.
thanks
g
Thx for the article.