Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Really Easy Custom Post Backgrounds For WordPress

As I’ve mentioned before, I’ve been having great fun with the new Nometet.com design. It’s now sporting a feature that allows the author to set a custom background for the post just by uploading an image. This image doesn’t even need to be the correct size; that’s all done on the fly. Uploading isn’t hard either; I’ve implemented an uploader that sits inside a meta box so the hardest bit is choosing the image! In this post we’ll have a look at how it’s done.

The uploader we’re going to be using later saves the image URL to a custom field, so first we’re going to get the custom field set up so that all you have to do is input a URL into the custom field and it gets displayed as the background. As I’ve shown before, it’s fairly easy:

<?php
$bg = get_post_custom_values("background");
if ( is_array($bg) ) { ?>

<style type="text/css" media="screen">

body{ background: url(<?php echo $bg ?>) fixed no-repeat; }

</style>

<?php } ?>

But that still means you’ve got to resize the image and copy out the URL into a custom field.

Custom meta uploader

We need an uploader in a meta box. When I was first pondering how to do this, I remembered that WooThemes use(d to use?) them in their themes. So I opened up one and lo and behold, there was a file admin-custom.php (under /functions). This is the bit used for the uploader and other custom meta boxes.

At this point I got slightly confused – at the top of the file it says:

This code is protected under Creative Commons License: http://creativecommons.org/licenses/by-nc-nd/3.0/

Which is completely contradictory to Woo being GPL and as the file is dependant on WordPress, I’m fairly sure it needs to be GPL too. Either way, as I see it I can still publish the code here. To be totally safe, I’m not going to “alter, transform, or build upon this work”. This does mean we’ve got some code we don’t strictly need, but it won’t have too much of a disastrous effect!

As it’s a fairly big file, you can download it here.

Once you’ve got the file, copy the whole thing into your functions.php file, making sure it goes directly after the closing ?> tag (ie ?><?php ).

We then need to trigger the meta box, which can be done with the following:

$woo_metaboxes = array(

		"image" => array (
			"name"		=> "bg",
			"label" 	=> "Background",
            "type" => "upload",
			"desc"      => "Automatically resized/enlarged but at least 1000px x 800px for it to be big enough."
		),

	);

update_option('woo_custom_template',$woo_metaboxes);   

Add that after the other code, but before the closing ?> tag. Save the file, upload it and create a new post. You’ve now got an uploader which will save images into the custom field ‘bg’.

Resizing the images

The final thing to do now is to just use timthumb to resize the images to a width of 1920px. Simple enough; download timthumb, upload it into your theme’s files and just apply the timbthumb syntax to the code in the header:

body{
background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;
}

And as you can see, that… doesn’t work. The custom field adds http://… to the image URL which timthumb doesn’t like.

At this point, I pondered a bit, tried (and failed) at a couple of solutions so did the only thing I could; grovelled with Ben to give me a hand. Thankfully, he agreed and told me I needed to encode my URLs, which means you’ll need to change the code to this:

body{
background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo urlencode($bg); ?>) fixed no-repeat;
}

And finally

Which leaves us with a really easy to use custom background uploader. You can check it out in action on the new look Nometet! Speaking of which, I’d really appreciate it if you gave the site a look; it’s a web based video game magazine.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Really Easy Custom Post Backgrounds For WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Art Direction For WordPress

“Art direction“, custom post designs, whatever you want to call them have taken off in a big way recently. First it was Jason Santa Maria amongst others, then Smashing Magazine picked up on it and as a trend
it exploded. For good reason too;
they’re awesome and great fun to do.

My personal favourites are the ones on Design Informer and Binary Moon. Both, like WPShout, are powered by WordPress. Unlike WPShout, they’re using custom post templates, something I’ve found myself increasingly against as
they’re a pain once you change the design. 
Sure, no way’s going to be perfect once you change a design, but some ways are
less of a pain than others.

Art direction is awesome and enhances your blog no end.

Here on WPShout I’m using CSS exclusively. This means the HTML doesn’t change one bit between non art directed posts and art directed posts; I just use a custom field to add in an extra stylesheet. When I first started dabbling in art direction a couple of months ago I found myself using inline styles through custom fields, but quickly realised that sucks because you can’t easily reuse the styles (find styles from last time, find file on FTP, load into text editor and so on) and, crucially, you can’t gracefully degrade your posts; the WPShout layout is over 1024px, thus visitors with that screen size just get the standard layout which, although still larger than 1024px, crucially the content area isn’t so posts are still readable. With external stylesheets I can selectively apply them and make new art directed posts quicker.

Using my CSS only way, it’s
fairly easy
to get started.

My “blank canvas” for WPShout

The three key rules of art.

1. I find that writing a post with the design in mind just doesn’t work. I have to write the post first and then fiddle around with the design. If you write trying to work out how you’ll style it, you’ll never get anything written.

2. Next, a simple reset of a couple of styles is a godsend. I’ve got a couple of styles I use as a reset and immediately my content area gets set to full width on a white background and pushes the sidebar down to level with the start of the comments. I’ve found keeping the header, sidebar, comments and footer just adds that extra bit of consistency which is important.

3. Finally, go crazy nuts with all the stuff you know is bad — use negative margins and a whole load of divs like there’s no tomorrow but crucially if you get rid of the stylesheet, everything goes back to normal and so you’re future proofed against any theme changes you make in the future.

The WordPress-ifying bit

As you might have been able to guess, we’re going to use custom fields to add our stylesheet to the post.

First thing to do is to upload the stylesheet — you’ll probably want it in your theme’s directory. Copy and paste the URL into a custom field “CSS”.

Next, pop open the header.php file and add the following, after your standard stylesheet:

Here we’re assuming your theme makes the fairly standard (in more recent themes) step of running the loop to get various titles or tags for SEO, but if it doesn’t then you can either run the loop or get custom fields outside the loop (thanks @ThemeLab and @mus_hi).

The designing bit

So now you’ve written the post and loaded the stylesheet, the next step is to actually fill that stylesheet. I’ve found the nth-of-type pseudo selector to be a fantastic way round of wrapping each paragraph in a div — you want to float the third paragraph right so instead of using the HTML editor to add a div around the paragraph, you can instead do this:

Bear in mind that if you’ve got some meta information first, that might mean the third paragraph of post content is actually the fourth paragraph within the hentry div.

And then you’re off. It’s great fun just fiddling around with styles to get your content laid out in a unique way.

It’s that simple

It’s taken me a while to actually see how easy it is to “art direct” my posts, but with a simple reset and adding stylesheets easily through custom fields, it’s fantastic fun just playing around and making a unique experience for your readers. Go on, give it a try.

Icons by phenixheart and Olwaolska

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Art Direction For WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Change CSS Styles with Different Categories in WordPress

THE PROBLEM

Recently I needed to set up WordPress to change the background colour of the page with each parent category. After a bit of Googleing, it appeared no-one had an easy answer, so I turned to my good friend the if statement. I thought I’d combine an if statement with the WordPress template tag IS_CATEGORY. Soon turned out that that wasn’t an option; theis_category template tag only works for archive pages, not posts themselves.

THE SOLUTION

The solution was another template tag, IN_CATEGORY. Combine that with a number of different CSS files, each with a different colour, and I was left with the following:

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/blue.css" type="text/css" media="screen,projection" />

<?php
if( in_category( 1 ) )
{
?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/blue.css" type="text/css" media="screen" />	

<?php } elseif ( in_category (2) )
{
?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/yellow.css" type="text/css" media="screen" />

<?php } elseif ( in_category (33) )
{
?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/black.css" type="text/css" media="screen" />
<?php }	else { 	?>

<?php }	?>

And that’s it. Obviously, you’ll need to put the code in the header.php file and have these different stylesheets created, but other than that, done!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Change CSS Styles with Different Categories in WordPress

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Best Practices for Creating Unique Blog Posts

Recently here on WPShout I’ve been sharing little tips that will help create a unique look for individual blog posts. Today we’ll be rounding up the “best practices” for creating that unique look, the easy way.

Post templates

Getting rid of the sidebar is a simple way to expand your options. Were we using pages, it would be easy to get rid of the sidebar with a page template, but those don’t exist for posts, do they? Wrong. They do. You just need a plugin which gives you page-like options for choosing your post template:

<?php
/*
Single Post Template: Template Name
Description: This part is optional, but helpful for describing the Post Template
*/
?>

And then with some simple styling you can widen your content area and get rid of the sidebar, offering you more room to create an awesome post.

Multiple sidebars

Say you don’t want to get rid of the sidebar, but instead display a different sidebar. That’s easy if you do multiple sidebars the right way, which, of course, has the following syntax:

• Save new sidebars with the sidebar-name.php format.
• Use <?php get_sidebar(); ?> to display new sidebars: <?php get_sidebar('name'); ?>

You can then create a page template with your different combinations of sidebar and make that blog post just that bit more unique.

Unique titles

Image replacement, emphasis, bold, the lot are all possible thanks to custom fields. Expanding further on this post, unique titles with image replacement are really easy to do. You just need to create a custom field called “post-title” and then you can put into that any kind of HTML you like – perhaps an image or just some emphasis? It’s all easy to do; you’ll need to replace <?php the_title(); ?> with the following code which will search for a custom field, display it if it exists and then fall back on the title.

<?php
$postitle = get_post_custom_values("post-title");
if ( is_array($postitle) ) { ?>
<?php echo get_post_meta($post->ID, "post-title", true); ?>
<?php }	else { ?>
<?php the_title(); ?>
<?php } ?>

Remember that custom fields can hold any kind of information and so you can put whatever you like in them to be displayed as the title – an image, some emphasis or just some text; do whatever you like.

Inline styling

Custom fields to the rescue again; we can use custom fields to add some simple styling to any post. As we’re outside of the loop, we’ll need some extra code, but nothing too complicated:

<?php $css = get_post_meta($post->ID, ‘css’, true); ?>

Needs to go at the top of your header file and then below your stylesheet, you’ll need the following:

<?php echo $css; ?>

And then you can fill in your custom field with some inline styling and perhaps change the background:

<style type="text/css" media="screen">

body{ background: #fff; }

</style>

Create columns of text within the post

This is probably my favourite. Using a simple grid system, it’s possible to put your content into many columns. This post explains all. You may ask why you don’t just use a <p class=”grid1″>-like system. The answer is that WordPress automatically adds in the <p> tag, so the only real option is to use <div>s.

Concluding

So there we have a number of ways to create a really fantastic unique blog post. Go and reap the rewards!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Best Practices for Creating Unique Blog Posts

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> The Death of the Boring Blog Post – Easily Add Columns to Any WordPress Post

Smashing Magazine recently published a wonderful post “The Death of the Boring Blog Post” which touches more or less on what I shared the other day – multiple post templates. Today we’re going to expand on that tutorial (except this is the really easy way).
It was watching a screencast on Nettuts the other day that inspired this post. Jeffrey Way was showing how to change the background of a post with custom fields (which is yet another example of the brilliance of the things!) when he shows a demo on his personal test area. The test area is a framework called “Flexible-WP”. I have no idea what it’s designed to do, but looking at a post, this is a pretty neat idea. Set some styling and use divs within posts to put posts into columns.
Here’s an example. Jeffrey has a grid. This grid can then be applied within posts just by going into the HTML editor in WordPress and adding a div around some text:-

A paragraph of interesting text.
A paragraph of more interesting text.

And then you’d have two bits of text which would be in columns next to each other. Clever, no?

Implementation

Implementation of this is actually quite simple. You’ll need a grid. If you’re using a theme based on a framework, it’s quite probably got the 960 grid system built in, in which case you can use that. If not, open up your style.css file and either create your own or use something similar to the below which Jeffrey uses on his site:

.g1 { width: 60px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g2 { width: 140px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g3 { width: 220px; margin-left: 10px; margin-right: 10px; float: left; display: inline;}
.g4 { width: 300px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g5 { width: 380px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g6 { width: 460px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; float: left; display: inline; }
.g7 { width: 540px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g8 { width: 620px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g9 { width: 700px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; float: left; display: inline; }
.g10 { width: 780px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g11 { width: 860px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }
.g12 { width: 940px; margin-left: 10px; margin-right: 10px; float: left; display: inline; }

And then when writing, you can utilise your grid by wrapping text as I show above. A really easy (and effective) to make your blog post that bit more unique and exciting.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> The Death of the Boring Blog Post – Easily Add Columns to Any WordPress Post

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Single Post Templates Made Easy

I had the visual pleasure of reading Ben Gillbanks’ blog, BinaryMoon the other day. Whilst Ben’s blog is usually looking pretty darn good, using WordPress as an advanced blogging platform, the other day it looked particularly good. Why? Ben was using unique page templates for specific blog posts.

I immediately thought to myself: “I need to know how to do that.” So I found out. Looks like Elemental is using some rather like Nathan Rice’s post template plugin which adds a simple dropdown to the post editor offering different post templates.

As themes and plugins start to merge more and more these days, this is yet another example of the merging that’s taking place – to integrate post templates into a theme is really easy:- download and unzip the plugin, open the php file and copy and paste into your functions.php file (at the very bottom, after closing php tag; you’ll want to tidy it up later one you’ve decided you’ll keep it). Next, you need to create the page template – create a duplicate of your single.php file but add the following to the very top of the file:

<?php
/*
Single Post Template: Template Name
Description: This part is optional, but helpful for describing the Post Template
*/
?>

Upload it and check out the post editor. With that, you’re done! You can then get styling to your heart’s content and create a really unique experience for each post you make to your blog.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Single Post Templates Made Easy

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> Free WordPress Ebook: Theme Development

The series has since been updated into this post: “Basics of WordPress Theme Design” — check it out!

WPShout proudly presents: “A Beginner’s Guide To WordPress Theme Development“. Available to you for free.

The book, in five chapters, 3,508 words and twenty one pages will give you a brilliant start with WordPress theme development.

Only the most basic of WordPress knowledge is assumed, so literally anyone can read this and become an awesome WordPress developer.

The table of contents is as follows:

• Chapter 1: The fundamentals of any WordPress theme.
• Chapter 2: The index.php and style.css files.
• Chapter 3: The header, sidebar and footer.
• Chapter 4: The single, comments and page files.
• Chapter 5: The archive, home and functions files.

If you’re reading this, then you’re wanting to get started with WordPress; I’d thoroughly recommend you follow me on Twitter and subscribe by RSS so you’ll keep updated with new WPShout posts.

Download and Subscribe by RSS or Follow on Twitter

The download does not include any of the themes used and referenced in the tutorial, so download those quickly too!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> Free WordPress Ebook: Theme Development

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> A Beginner’s Guide to WordPress Theme Development: Day 5

• Day 1: Introduction, the fundamentals of WordPress theme development
• Day 2: The index.php and style.css files: the most important parts of any theme.
• Day 3: The header.php, sidebar.php and footer.php files.
• Day 4: The single.php file: the file that handles posts.
• Day 5: The archive.php, home.php and functions.php files and a wrap up of all that has gone on. You will also be able to download the whole series as an eBook.

We’re nearly there. This is the final day of ‘A Beginner’s Guide to WordPress Theme Development’. We’ve got three files to tackle today, but there isn’t too much I’m going to say on each of them. Let’s start with the archive.php file. Download the latest copy of our theme, Champion, unzip it and load up the archive.php file in your text editor.

Creating an awesome archive page in WordPress

According to the WordPress file hierarchy (which we discussed on day two), 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 on day 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 if statements 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.php file?

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.

Developing the homepage

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 class="widget">',

'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 this to find out how to build your own theme options page in WordPress.

Concluding the series

We’re done! We have now covered all of the files that any awesome WordPress theme needs! If you enjoyed this series then please consider a donation – it would be wonderful if you could spare a few Pounds/Dollars/Euros/[Your currency here]; these tutorials don’t write themselves!

I hope this series has given you a good start with developing WordPress themes, and make sure you subscribe by RSS to hone your skills further. As I hope I’ve proved this week, it needn’t be hard to become aware of what all the bits of code on your theme do, and you never know, perhaps in a year or two I could be reading your blog about advanced uses of WordPress!

As I mentioned earlier, a free eBook will be available on Monday with the whole week’s posts, which you can download, keep, print, whatever. It’ll be there when you want to give it another read. So there we are. I hope you’ve enjoyed the series and are on your way to becoming an awesome theme developer! As always, if you’ve got a question, thought or anything you want to share then leave a comment.

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> A Beginner’s Guide to WordPress Theme Development: Day 5

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> A Beginner’s Guide to WordPress Theme Development: Day 4

• Day 1: Introduction, the fundamentals of WordPress theme development
• Day 2: The index.php and style.css files: the most important parts of any theme.
• Day 3: The header.php, sidebar.php and footer.php files.
• Day 4: The single.php file: the file that handles posts.
• Day 5: The archive.php, home.php and functions.php files and a wrap up of all that has gone on. You will also be able to download the whole series as an eBook.

Today, continuing WPShout’s series, "A Beginner Guide To WordPress Theme Development", we’ll be developing a file that handles posts – the single.php file. Download the latest copy of the theme we’ve been developing all week, ‘Champion’ with the link above, unzip it and you should notice a couple of new files have appeared! The two new files we need for today’s instalment are the single.php file and the comments.php file. Let’s first look at the single.php file.

Developing the single.php (post Page) file

Upon opening the single.php file, it should look pretty familiar; the first line is <?php get_header(); ?> which, as we learnt yesterday, 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 with the single 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 post 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!

Wrapping up

So there we are until next time. To recap today’s events, we’ve created a single.php page that handles posts, created a comments.php page that handles comments and a pages.php file that handles pages. Tomorrow we’ll be wrapping up the tutorial series with a look at the home.php file, functions.php file and archive.php file. Also tomorrow, a PDF of the whole series will be available for download. In the meantime, go and play around with what you’ve learnt today, leave a comment, subscribe by RSS and tell all your Twitter friends about the series with the link below!

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> A Beginner’s Guide to WordPress Theme Development: Day 4

Lots of posts on WPShout are art directed, so you may wish to view this in your browser --> A Beginner’s Guide to WordPress Theme Development: Day 3

"A Beginner Guide To WordPress Theme Development" continues on WPShout today, with the third of five installments. Today, we’re looking at the header, sidebar and footer.

Day 1: Introduction, the fundamentals of WordPress theme development

Day 2: The index.php and style.css files: the most important parts of any theme.

Day 3: The header.php, sidebar.php and footer.php files.

Day 4: The single.php file: the file that handles posts.

Day 5: The archive.php, home.php and functions.php files and a wrap up of all that has gone on.

Moving directly on from yesterday’s creation of the index.php and style.css files, today we’re going to be creating three additional files: the header, sidebar and footer files. As you might have guessed, these are going to house the header, the sidebar and the footer.

Why have separate files for the header, sidebar and footer?

To answer the question, first 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 replaced with a piece of PHP –

<?php get_header(); ?>.

This is another of WordPress’ template tags, and it’s telling WordPress go into the theme files, find the header.php file and display the contents here. As your theme becomes more and more complicated, this allows you to create a single header and use it throughout your theme. At this point, you’re probably opening up the header.php file. Good idea! Upon opening it, you’ll see it’s the same thing we had starting off our index.php file yesterday. All that has changed is now it has a whole file to itself.

Decipering 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 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 on Friday as it requires the functions.php file.

The Footer

The final part of today’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 yesterday.

Wrapping Up

So there we are. We’ve split up our index.php file into a header, sidebar and footer. Tomorrow we’ll be making use of these new files and creating the single.php file for posts. In the meantime, why not follow me on Twitter, leave a comment and have a nice cup of tea?

This is a post from WPShout. If you enjoyed the post, please head over to the site and share or leave a comment! --> A Beginner’s Guide to WordPress Theme Development: Day 3