Here’s the problem. After leaving a comment you are sent to http://www.bloggingtips.com/wp-comments-post.php, which is a blank page. If you go back a page and reload then you should see your comment but that page should be redirecting you back to the blog post with your comment on it.

I’ve only had this problem after updating to WordPress 2.9. However, it’s clear from reading the WordPress support forums that this is a problem that many people have had for a year or so. My hope was for this article to be an explanation of how you can resolve this problem. Unfortunately, I’ve not been able to fix it as yet.

If you have had this problem and fixed please share the process you went through to resolve it. I’m sure many readers, and myself, would be very grateful.

Here are a few steps I have taken to try and resolve this problem. Many people have reported them working for them but none have resolved the issue for me.

• Repaired the comments table via PHPMyAdmin
• Made sure my comments.php template was up to date and removed whitespace from the wp-comments-post.php template
• Disabled the Akismet Plugin (Not sure if this is necessary but a few people said it was causing the blank page for them)
• Used theme test drive to try out another theme to see if the problem was related to the comments.php code

Unfortunately, most of the threads over at WordPress are incomplete with the blogger either not getting his problem resolved, or resolving it and not coming back to explain how he fixed it.

The last thing I can think is causing this is a probllem with database memory. Though if that was the case my other blogs would probably be having this problem too and they’re not. Plus, it’s always best to exhaust all other options before going to your host for help as they can’t be expected to resolve script issues like this.

I do apologise for any inconvenience caused by commentating at the moment. You can leave a comment but you will probably just get sent to that white page so please make sure you hit your back button after submitting your comment.

Again, any feedback on fixing this error would be greatly appreciated.

Thanks,
Kevin

How to stop the blank page after leaving a comment in WordPress?


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

There are a few other good looking features, the widget interface has improved greatly and you can now arrange your dashboard into four columns. Under your General settings you can change your timezone to a city in your country and then update for daylight savings which is a major update for those of us who forget!

Finally you can now control how many items are displayed per page in your admin, great for those who want 50 posts on the edit posts page rather than the default 15. To change this you need to go into the page eg. Edit Posts, the click on the Screen Options tab at the top and there you can change it to how ever many you want (it says 20 but there are only 15 there by default, honest!).

Template Tags

So how about the new template tags available? There are a few which are listed below. This won’t seem as major as the 2.7 upgrade where we had new code for the comment listing, however, the tags below may be of use to some and should help tidy up your code even further in areas.

the_modified_author()

This new tag allows us to display the author who last modified the post. We already have the_modified_date() which displays the date the post was last modified. This is handy if you wanted to display the post date and author as well as the modified date and author, of course more useful for multi author sites.

tag_description($tagID);

This will return the description for the given tag ID, useful if you wanted to output it at the top of your tag theme file.

term_description($termID, $taxonomy)

This returns the description of the give term ID for the specified taxonomy. The latter parameter can be ‘category’, ‘post_tag’ or ‘link_category’.

wp_lostpassword_url($redirect)

This allows you to insert the Lost Password URL within your page. If you supply a redirect URL then once the lost password is requested the user will be redirected back to the page specified for example, to return the user to the page they were on use the get_permalink() tag eg. wp_lost_password_url(get_permalink()).

the_author_meta($field, $ID)

This will display an Author’s meta data stored under the wp_usermeta table. If used with the loop then the $ID can be omitted (if you want that author’s details). A number of fields to specify are available, the more useful ones in a template being:

• user_nicename
• user_email
• user_url
• user_registered
• display_name
• nickname
• first_name
• last_name
• description
• jabber
• aim
• yim

If you want to return the data then use get_the_author_meta($field, $ID) instead. (Note: this will eventually replace many of the the template tags starting (get_)the_author_. Check the deprecated tags list for more info). This tag seems to be similar to get_usermeta(), it just doesn’t require a user ID specifying.

WordPress 2.8 Features


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

To create a very basic widget it’s quite simple. We just need to add a function into our functions.php theme file which outputs the content, and then register it as a sidebar widget. Sounds easy? It is

So, let’s use our WordPress login form as an example. I’ve covered how to add a login box before, so we’ll take this code as our user code. All we need to do with it is wrap this in a function i.e.

<?php
function lbox_widget() {
	if (!is_user_logged_in()) : ?>

<form id="loginform" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
    <fieldset><legend>Login</legend>
	<div>
		<label for="log">Username
		<input type="text" name="log" id="log" size="20" /></label>
	</div>
	<div>
		<label for="pwd">Password
		<input type="password" name="pwd" id="pwd" size="20" /></label>
	</div>
	<div>
		<label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
	</div>
	<div>
		<input type="submit" name="wp-submit" id="wp-submit" value="Log In" />
		<input type="hidden" name="redirect_to" value="<?php echo urlencode(get_permalink()); ?>" />
	</div>
    </fieldset>
</form>

<?php else : ?>

<ul>
    <li><a href="<?php echo get_option('home'); ?>/wp-admin/">WP Admin</a></li>
    <li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Logout</a></li>
</ul>

	<?php endif;
} ?>

Of course at this point you could just use the function call and place that in your sidebar or whereever you wanted it. However, for ease of use, especially if the site isn’t actually for you but someone who is less clued up on code, we can register it as a widget and then it can just be added to our dynamic sidebar in which ever location you want. So to register our function as a widget we use the register_sidebar_widget() function eg.

<?php register_sidebar_widget(__('Login Box'), 'lbox_widget'); ?>

We can place this before or after the function. The first parameter is the name of the widget, which is only seen in the Widgets admin page. The second parameter is the function name for our widget.

If you add all of this code into your functions file then go to your Widgets admin page under Appearance, you should now see a new widget called ‘Login Box’.

That is the basic method, however in our widgetise your theme post I also covered about setting the code to go before and after the widget and before and after your heading. We can then pull this into our login box function, so that we set the before and after widget code in the function. To do this we pass the variable $args to our login box function. We then extract this and then we have the array keys set which if you remember were

array(
	'before_widget' => '<li>',
	'after_widget' => '</li>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
);

So we can then use $before_widget, $after_widget, $before_title and $after_title in our function output if we want. For this function there isn’t really a title, however we could insert one for logged in users such as ‘Welcome Back’. So to put these changes into practice we now use:

<?php
function lbox_widget($args) {
	extract ($args);

	echo $before_widget;
	if (!is_user_logged_in()) : ?>

<form id="loginform" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
    <fieldset><legend>Login</legend>
	<div>
		<label for="log">Username
		<input type="text" name="log" id="log" size="20" /></label>
	</div>
	<div>
		<label for="pwd">Password
		<input type="password" name="pwd" id="pwd" size="20" /></label>
	</div>
	<div>
		<label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
	</div>
	<div>
		<input type="submit" name="wp-submit" id="wp-submit" value="Log In" />
		<input type="hidden" name="redirect_to" value="<?php echo urlencode(get_permalink()); ?>" />
	</div>
    </fieldset>
</form>

<?php
else :
	echo $before_title."Welcome Back".$after_title;
?>

<ul>
    <li><a href="<?php echo get_option('home'); ?>/wp-admin/">WP Admin</a></li>
    <li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Logout</a></li>
</ul>

	<?php endif;
	echo $after_widget;
}

register_sidebar_widget(__('Login Box'), 'lbox_widget');
?>

As you can see here, I’ve passed the variable $args to the function. Then on line 3 I extract these which then allows me to echo them out like standard variables. I’ve then added the $before_widget variable on line 5 and the $after_widget on line 39. Finally I’ve inserted our new title in at line 30.

If you update your functions file with that code and then refresh your site (assuming you’ve added the new widget in already) then you should see the changes. Don’t forget, you’ll only see the login box if you’re not logged in. I recommend using two browsers to see the two different versions (or logging out then back in!).

This is just a simple method for adding your own widgets. You can use this to add any code/script or standard markup of your own.

Next week I’ll explain how we can change your standard plugin to offer a widget as well, and also how to add options into the widget admin page.

Create Your Own WordPress Widget


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

For the basics of using the custom fields in the admin then please read the custom fields post first. Below are just working examples.

Meta Description

Before you mention (or think it), yes there’s the fantastic All in One SEO pack, but I don’t use this for my blog as I don’t need that much extra code running. I don’t think that this plugin is needed for blog posts however, sometimes a meta description is. So instead of adding a full blown plugin for the benefit of a few pages, we can just use a custom field.

So if you set up a custom field for each post that you want to add a meta description for, give the custom field a name of metad and the value should contain the description. Don’t forget, once you create the custom field the name will be available automatically for all your other posts and pages.

Then in your header.php file you want to add the meta description tag in. You can either just use

<meta name="description" value="<?php echo get_post_meta($post->ID, 'metad', TRUE); ?>" />

Or, if you don’t want an empty description tag if there’s no description then you can use an if statement with it ie.

<?php $metad = get_post_meta($post->ID, 'metad', TRUE);
if ($metad) : ?>
   <meta name="description" value="<?php echo $metad ?>" />
<?php endif; ?>

This will only put a description then if one exists for the post or page currently being viewed.

Post Image

A lot of bloggers like to add an image to their posts, and whilst this is easily done in the post content area, you could reduce your work by using a custom field. If you create a custom field for a post with a name of postimage and then the value is the URL of the image (you can still upload the image via the image uploader, but instead of inserting it into the post, just copy the URL). We also need some alternative text so create a second field called postimgalt and enter the text for the alt attribute in the value field.

Then in your single.php page (and index.php, archive.php and category.php pages if each exists and you’re showing full content posts in there) add the image code where you want the image to be placed. For example if you wanted the image to be at the top right of your post then you could use the following just before the template tag the_content();

<?php $postimage = get_post_meta($post->ID, 'postimage', TRUE);
if ($postimage) : ?>
    <img src="<?php echo $metad ?>" alt="<?php echo get_post_meta($post->ID, 'postimgalt', TRUE); ?>" class="imgright" />
<?php endif; ?>

Note the class imgright would then have the styles:

.imgright {
    float: right;
    margin: 0 0 10px 10px;
}

This way you would then just have content in your post and your post image would go into the custom fields.

Specify the Language

Last year we created a multilingual site in WordPress for a client, yet still wanted to be able to add the lang and xml:lang attributes to the HTML tag, so we created a custom field called langtype and then used this to insert the correct type ie.

<?php
$langtype = get_post_meta($post->ID, 'langtype', TRUE);
if (empty($langtype)) $langtype = 'en';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $langtype ?>" lang="<?php echo $langtype ?>">

This is useful for sites running two or more languages.

Credit Author

Sometimes you may have a guest author write for your site. Yes, you can create them an account for this but then that means you need to leave the account there for the lifetime of the blog (on account deletion, the author’s post will be recredited to the site admin or whoever you select during account deletion). Instead of creating an account for each guest author you have, especially if it’s only a one off, you can create a custom field to credit the author. So for a guest post, create a field called pauthor, and enter the Author’s name. If you want to link their name then you can also create a second field called pauthurl and enter the author’s website (note I’m just making up fieldnames here. Just make sure they’re unique and unlikely to clash with anything else already in the database table).

Then in your template files, where it usually says the author’s name, we can replace this with displaying the guest author, if one exists, else display the post author eg.

Post written by:
<?php
$pauthor = get_post_meta ($post->ID, 'pauthor', TRUE);
if ($pauthor) :
    echo "<a href='".get_post_meta ($post->ID, 'pauthurl', TRUE).'">".$pauthor."</a>";
else :
    the_author();
endif;
?>

This would replace your usual “Post written by: Sarah” code. Of course each theme is different so you will have to determine what to replace where.

Alternatively you could just add a line at the top of the post if there is a guest author set eg.

<?php
$pauthor = get_post_meta ($post->ID, 'pauthor', TRUE);
if ($pauthor) :
    echo "<p>The following post is a guest post by <a href='".get_post_meta ($post->ID, 'pauthurl', TRUE).'">".$pauthor."</a>.</p>";
endif;

Conclusion

Hopefully this has given a few more examples of custom field usage to help you understand how you can use them, or for those who haven’t seen them before, given you some new ideas on how you can add unique content to your posts and pages without too much effort.

Revisiting WordPress Custom Fields


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Everything we need can actually be accomplished in three lines of code.

The first bit of javascript we need to accomplish this is supplied to us by Twitter.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=1"></script>

You’ll want to change USERNAME to your Twitter username. You can also change count=1 to whatever number of Tweets you want to show up. You are best to put this script somwhere at the bottom of your template. That way if there is any load issues at Twitter your blog page will still load first.

Now all you need is a line of HTML code to display the Tweets.

<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul></div>

It is up to you where you want your Tweets to appear. If your blog is widget-ready you can simply paste this HTML code into a text widget and drag it to the desired location. You can also manually edit sidebar.php or even put it in the header or footer of your blog.

From here you are free to add a new selector to your stylesheet to style the updates. Make a CSS selector with the ID ‘twitter_div’ and style it as you see fit.

Get your latest tweets on your blog – Plugin free


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

So, if we use the example of having perhaps 6 different theme styles on one site, and offering user’s a style switcher to select which one they preferred to see. Often people may just have the 6 themes online, each directory having the index.php theme file, the functions, page, archive, category, single and comments template files. That’s fine until a new version comes out of WordPress, there are maybe a few new tags you can use, or you decide you want to add a bit of code to say the footer of your site. 6 themes may not be so bad, but if you run a multi author blog, perhaps on WordPress MU, then try changing 6 to 60. Suddenly it’s not so good!

Our main theme (we’ll call it ‘Parent’), would consist of all the theme files we need. The typical files being:

• style.css
• index.php
• archive.php
• single.php
• page.php
• comments.php
• sidebar.php
• header.php
• footer.php
• functions.php

Of course you may have additional files as well, but those are a selection of the most common theme files. To define the theme, the style.css file will have the following at the top of it:

/*
Theme Name: Parent
Theme URI: http://www.mysite.com/
Description: The default Parent theme from mysite
Version: 1.0
Author: Me
Author URI: http://www.mysite.com/
*/

We would then put this theme directory in the usual place under /wp-content/themes/.

Now we can move on to creating a child theme. So for example, our parent theme is quite plain, standard letter sizes and black and white. We can then create one child theme that uses a variety of colours, and a second theme that increases the size of the font and allows the site design/layout to work with the increased font size. So for the first child theme we could call this one Rainbow, and tell it to inherit from the parent theme. We would create a new stylesheet for the Rainbow theme, and at the top of style.css we would place

/*
Theme Name: Rainbow
Theme URI: http://www.mysite.com/
Description: The Rainbow child theme from mysite
Version: 1.0
Author: Me
Author URI: http://www.mysite.com/
Template: parent
*/

The additional line in this to tell the theme where to inherit from is the last line ‘Template: parent’. The template name should refer to the directory that the theme is stored in, and it’s case sensitive.

You can then set all of your styling in this style.css file for the site and upload it to a new theme directory called ‘rainbow’. If you wanted to inherit the styles from the parent theme then you would need to import the parent stylesheet in, then add your own CSS below to override any styles necessary. So you can add:

@import url("../parent/style.css");

below the top comment in the file.

Then we’ll create our second stylesheet, for increasing the overall size of the site (yes a well coded site shouldn’t require a second stylesheet to increase the text size and size of the site, but this is only an example!). This one we’ll call Large B&W. So again we do the same as above in our new style.css file

/*
Theme Name: Large B&W
Theme URI: http://www.mysite.com/
Description: The Large Black and White child theme from mysite
Version: 1.0
Author: Me
Author URI: http://www.mysite.com/
Template: parent
*/
@import url("../parent/style.css");

We then put this into a directory called largebw.

Our themes directory would now look like

1. parent
   • style.css
   • index.php
   • archive.php
   • single.php
   • page.php
   • comments.php
   • sidebar.php
   • header.php
   • footer.php
   • functions.php
2. rainbow
   • style.css
3. largebw
   • style.css

Up until WordPress 2.7 that was all we could do. It served a purpose, but was obviously limiting in its usefulness for most people. However, since WordPress 2.7, you can now also add PHP theme files in your child directories to override the parent’s where necessary. So, for example, if you wanted to put an advert in your Large B&W single post theme file for a screen reader, then you would take a copy of the single.php file from the parent theme, add in the additional code for your advert, and then put this into your largebw theme directory. This directory would then have the files style.css and single.php, the other theme files would inherit from the parent directory.

You may still wonder if this is of any use to you. If you decide to purchase a theme (or find one for free at WordPress) then you would hope that the theme be kept up to date with the newest WordPress additions and functions. Yet, you may want to make some changes to it to suit your own style. Perhaps change the sidebar to use h3 on headings instead of h2, maybe change the header to have a big advert across the top, or maybe add a flickr badge in the footer. However, when the theme is upgraded, you have to do this all again – which usually means it’s unlikely you’ll upgrade your theme! With Theme Inheritance, you can create your child theme to inherit the untouched theme and then you can just copy the files you want to change into it, make your alterations, and leave the rest as normal. Yes you would still have to make a few alterations possibly on upgrading the theme, but it wouldn’t be as much hassle.

So, hopefully now you can see the potential for using child themes on your site, regardless of whether you have one theme or many, it has a use that is not widely used yet but I’m sure will be in the future

Wordpress Theme Inheritance


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

You Will Need:

• Basic HTML Knowledge
• An FTP Client
• No Fear of PHP Code

In order to add images to your theme you will need to first create a folder within your current wp-themes folder called images. Unless it already has one, in which case it would be found in your wp-folder/WP-Content/WP-Themes/YourTheme/images.

Using your favorite FTP Client ( I like leech FTP ) upload any images that you want to use in your theme. If you just want to replace the images that come stock with your WordPress theme you can probably get away with simply renaming your new images to overwrite the ones in your current theme images folder. If you’re adding images to place they didn’t exist before, read on.

Grabbing the directory with WordPress template tags

You can use a WP template tag to refer to the current theme’s directory without having to type out the entire URL. This is the most compatable way as it uses a dynamic reference to the directory, and will work on any installation.

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

This will simply get you into the directory of whatever theme is currently active. Now lets look at two ways to implement and image from this folder.

First we’ll look at getting a background image from this directory, then a static image that could be served as a logo or an icon elsewhere in the theme.

In your stylesheet:

body{
background-image: url(<?php bloginfo('template_url');?>/images/my-image.gif);
}

The code above simply looks for a specific image inside the images folder within your theme. The second code will do the same, but will populate a normal HTML image code.

<img src="<?php bloginfo('template_url');?>/images/my-image.gif" alt="my icon"/>

You should know feel relatively safe adding your own images to any WordPress theme.

Adding custom icons to your WordPress theme


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

So last week we used the basic code in our functions file of:

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

To create multiple sidebars we first need to add the name key into our array to allow us to distinguish between the different registered sidebars. This is a fairly simple change e.g.

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Right Sidebar',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

Multiple Sidebars

To then create a second sidebar you just use a different name for each. You can also change the before and after keys too eg.

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Right Sidebar',
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
    register_sidebar(array(
        'name' => 'Footer',
        'before_widget' => '<div class="footer_widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

When you then want to call a sidebar you need to alter the code in your theme file to include the sidebar name as a parameter of the function dynamic_sidebar() eg.

if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer')) :
    // enter HTML code here for items such as recent comments, recent posts etc.
endif;

We use the register_sidebar() function if we want to give very different names to each sidebar and/or change the before and after code. However, there is also the register_sidebars() function, which can reduce code, providing certain elements are to remain the same. To use the register_sidebars() function we tell the function how many sidebars to register eg.

if (function_exists('register_sidebars')) {
    register_sidebars(2, array('name' => 'Sidebar %d'));
}

This would create two sidebars with the names Sidebar 1 and Sidebar 2. This is an okay solution if you only intend to have maybe a couple of sidebars and you know which one goes where, however for ease of use I would recommend the first method and assign more precise names. Plus if you intend to give your theme away or sell it, then whilst you may know which sidebar is which, the user may not!

Adding Widgets

Now when you go to your Widgets section under Appearance, in the admin, you’ll have a drop down to select which sidebar to add the widget to. This allows you to set up each dynamic sidebar easily.

Widgetise Your Theme Part II


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

The Function

First we need to register the sidebar in our functions.php file (if you don’t have a functions.php file, create one). At the simplest form this is

if ( function_exists('register_sidebar') ) {
    register_sidebar();
}

This will set your widgets up in an unordered list with the widget title in a h2 and the content in an unordered list eg.

<ul>
    <li><h2>Widget Title</h2>
        <ul>
            <li>Widget Item here</li>
            <li>Another Item</li>
        </ul>
    </li>
    <li><h2>Widget Title 2</h2>
        <ul>
            <li>Widget Item here</li>
            <li>Another Item</li>
        </ul>
    </li>
</ul>

Of course, this markup isn’t to everyone’s liking. Personally I prefer to use h3’s instead of h2 headings. So to do this we can override the default settings using the following code:

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}

If you want to be able to target the widget’s output even more then we can add an ID and class to the widget using the following code:

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}

The ID is generated from the widget’s name and the class is generated from the widget’s callback.

So now we’ve got our sidebar set up in the functions file you can add widgets via the Appearance -> Widgets menu. Now we need to get them showing on the front end.

The Sidebar

The code required for the sidebar is a simple if statement that checks if we’ve registered a sidebar. If we have then it will show that, otherwise it will display what’s within the if statement. This is achieved using the following code:

if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) :

This simply says ‘if the function dynamic_sidebar() doesn’t exist, or there’s no output from the function dynamic_sidebar() display the following’. Within the if statement you place the code that you want to display if the user doesn’t add any widgets to their sidebar (even if you’ve got the functions file and sidebar set up, if no widgets are added then no output is made and so the if condition becomes true and the code within it will display.

So this gives us the final code of

if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) :
    // enter HTML code here for items such as list categories, pages, recent posts etc.
endif;

Conclusion

This is a simple addition but with widgets becoming quite popular, it’s a good idea to add the code in to make your theme even more flexible.

Widgetise Your Theme


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

So first we need to create an admin page to go into the Appearance menu. To do this we can insert the page into the theme’s functions.php file. We create the page similar to how we created admin pages for our plugin. e.g.

add_action('admin_menu', 'ourtheme_add_theme_pg');

function ourtheme_add_theme_pg() {
    add_theme_page(__('Theme Options'), __('Theme Options'), 'edit_themes', basename(__FILE__), 'ourtheme_functions');
}

This will add a new menu item called Theme Options into our Appearance menu in the admin. Then we need to decide what options we’re going to offer the users. Bear in mind, the more options you offer, the more code is required and the slower the site can become. I’ve seen a site slow down from 0.5 seconds to 15 seconds load time, just due to a badly written theme options page!

So let’s allow the user to change the image file used. In the theme directory you can create an images directory to store a number of different banners (or the user can add more of their own), so we’ll just give them the option of choosing one of these rather than going through the code of how to upload an image to the website.

The Basic Admin Page

Let’s just grab the basic admin page code again to use as our template:

<div class="wrap">
 	<form id="options_form" method="post" action="">
		<h2>< ?php _e('Theme Options'); ?></h2> 

		<div class="ui-sortable">
			<div class="postbox">
				<h3 class="hndle">< ?php _e('Sub Header'); ?></h3>
				<div class="inside">

					** Form or content goes here **

				</div>
			</div>
		</div>
	</form>
</div>

List Banners Available

On the page we’ll check all of the banners available within the images directory and list them in a select list. We’ll also pre-select the current one used:

<div><label for="topimg">Top Banner</label>
<select id="topimg" name="topimg">
< ?php
$template_dir = get_template_directory();
$default_file = "header.gif";
$allowed_file_ext = array(".gif", ".png", ".jpg", "jpeg");

if (get_option("ourtheme_header")) $default_file = get_option("ourtheme_header");

if ($handle = opendir($template_dir.'/images/')) {
    while (false !== ($file = readdir($handle))) {
        if (in_array(substr($file, -4), $allowed_file_ext) {
            echo "<option value='".$file."'".($file == $default_file ? ' selected="selected"' : '').">".$file."\n";
        }
    }
    closedir($handle);
}
?>
</select></div>

Here we open up the images directory within the template directory (found by using the WordPress function get_template_directory()) and then loop through each file found and add it to our select list providing it is an image file (achieved by checking the last 4 characters of each file found against the array of file extensions). This also checks the filename against the current file in use and marks the option as selected if it matches.

This code, along with a submit button is then inserted into our default admin page code above.

Process the Form

To process the form all we need to do is check the submit button has been clicked, if it has then grab the image selected and store it in our options table i.e.

if (isset($_POST['theme_submit'])) :
    update_option('ourtheme_header', $_POST['topimg']);
    echo '<div id="message" class="updated fade"><p><strong>'.__('Options saved.').'</strong></p></div>';
endif;

Final Admin Code

This gives us the final code to go into our functions file of:

add_action('admin_menu', 'ourtheme_add_theme_pg');

function ourtheme_add_theme_pg() {
    add_theme_page(__('Theme Options'), __('Theme Options'), 'edit_themes', basename(__FILE__), 'ourtheme_functions');
}

function ourtheme_functions() {
    if (isset($_POST['theme_submit'])) :
        update_option('ourtheme_header', $_POST['topimg']);
        echo '<div id="message" class="updated fade"><p><strong>'.__('Options saved.').'</strong></p></div>';
    endif;
?>

<div class="wrap">
 	<form id="options_form" method="post" action="">
		<h2>< ?php _e('Theme Options'); ?></h2> 

		<div class="ui-sortable">
			<div class="postbox">
				<h3 class="hndle">< ?php _e('Sub Header'); ?></h3>
				<div class="inside">

					<div><label for="topimg">Top Banner</label> <select id="topimg" name="topimg">
						< ?php
						$template_dir = get_template_directory();
						$default_file = "header.gif";
						$allowed_file_ext = array(".gif", ".png", ".jpg", "jpeg");

						if (get_option("ourtheme_header")) $default_file = get_option("ourtheme_header");

						if ($handle = opendir($template_dir.'/images/')) {
						    while (false !== ($file = readdir($handle))) {
						        if (in_array(substr($file, -4), $allowed_file_ext)) {
						            echo "<option value='".$file."'".($file == $default_file ? ' selected="selected"' : '').">".$file."\n";
						        }
						    }
						    closedir($handle);
						}
						?>
					</select></div>

				</div>
			</div>
		</div>
	</form>
</div>

< ?php } ?>

Front End Edits

Finally all we need to do is set up the code for the header.php file to check which banner to display. So wherever the banner is displayed we just need to take the default image filename out and use the following PHP code:

<img src="< ?php bloginfo('template_url');
$headerimg = "header.gif";
if (get_option("ourtheme_header")) $headerimg = get_option("ourtheme_header");

echo "/images/".$headerimg." />" alt="Top Banner" />

Alternatively, if your banner is using the image replacement technique, then you’re best off adding an action to add the CSS style needed to the wp_head() function in your function.php theme file e.g.

add_action("wp_head", "ourtheme_addheader");

function ourtheme_addheader() {
    if (get_option("ourtheme_header")) :
        echo '<style type="text/css">#header { background: url('.get_option("ourtheme_header").'); </style>';
    endif;
}

This will then insert the style to override the default styling set up in your CSS stylesheet.

This is just a simple example of creating an options page for your theme, but the logic is the same for virtually all the options you could want to offer. Just create the various form elements to allow the user to make their changes, and save the selections and information in the options table using unique option names.

Creating Theme Options


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Creating a Submenu Page

The syntax of using these predefined functions is the same as using the options page function. To remind ourselves, this is

add_options_page(Page Title, Menu Title, user level / capability, file, function name, icon url);

For adding a management page, which will then appear under the Tools menu (for WordPress 2.6 and below this would appear on the management menu), we use

add_management_page(Page Title, Menu Title, user level / capability, file, function name, icon url);

and for adding a page to the Theme management section we use

add_theme_page(Page Title, Menu Title, user level / capability, file, function name, icon url);

If you want to add a menu page to another section then we use the standard add_submenu_page() function. This is almost the same as the predefined functions except we tell the function which admin page to make this a submenu of. The syntax for this function is

add_submenu_page(Parent File, Page Title, Menu Title, user level / capability, file, function name, icon url);

The parent file is just the PHP filename (including the .php extension) of the parent file, all of which are listed below:

• For the Dashboard menu use index.php
• For the Posts menu use edit.php
• For the Media menu use media.php
• For the Links menu use link-manager.php
• For the Pages menu use edit-pages.php
• For the Comments menu use edit-comments.php
• For the Plugins menu use plugins.php
• For the Users menu use users.php

Of course the Appearance, Tools and Settings menus can be targeted using the predefined functions above.

Creating a new Menu

If you start to develop larger plugin files then you may find that you need several pages for users to manage their content. Once you get to this point then you’ll want to create a whole new menu section. To do this we use the add_menu_page() function, and then add subpages to that. The syntax to create your own menu is

add_menu_page(Page Title, Menu Title, User Level / Capability, file, function name, icon);
add_submenu_page(Parent File, 'Page Title', 'Menu Title', User Level / Capability, file, function name);

Then you would repeat the submenu page function for each submenu page you need. For example, a recent plugin that I’ve created for converting a gallery section over to work in WordPress (without having to change 1000+ records to use the built in WP Gallery!), used the menu of

add_menu_page('Gallery Management', 'Gallery Management', 8, __FILE__, 'album_mgt_add');
add_submenu_page(__FILE__, 'Add a Gallery', 'Add a Gallery', 8, __FILE__, 'album_mgt_add');
add_submenu_page(__FILE__, 'Edit a Gallery', 'Edit a Gallery', 8, 'album_mgt_edit', 'album_mgt_edit');
add_submenu_page(__FILE__, 'Remove a Gallery', 'Remove a Gallery', 8, 'album_mgt_rem', 'album_mgt_rem');

In the add_menu_page() the fourth parameter is told to use the existing plugin file to find the album_mgt_add() function. Then in the first submenu page I’ve used similar parameters (except the additional first parameter is set to use the plugin file as the parent, so that the submenu page appears in the correct menu), so that if you click on the ‘Gallery Management’ main menu heading, or open it up and click on the Add a Gallery, both will go to the Add a Gallery page, similar to how the other admin menus work. For the Edit and Remove pages I’ve set the fifth and sixth parameters to use the function name as all the functions are in one file. If you were to split the plugin into several files (recommended for very large plugins) then you would set the fifth parameter to be the filename of where WordPress can find the function.

Controlling Access

I personally prefer to use the user level system to control who can see the menus, which means that I tend to set a level access of 8 for Administrators only, 7 for Editors and Administrators, 2 for authors and then 0 for any registered user. You can read more about the roles and capabilities available to you from the WordPress Codex.

Don’t forget, using a plugin that allows you to alter the default user roles and capabilities will also affect your plugin(s) so if you use this then be certain to check on your plugin access for the user types.

Plugin Administration Menus


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

So first we need to modify our display function. At present it just echos out the markup, however we need it to do the following

1. Put the markup into a variable
2. Check which option is set
3. If you should attach the links to the content, and the content isn’t empty, append the links variable created in point 1
4. Else, if the content is empty (therefore the function has been called directly), echo the links variable
5. Else, just return the original content without any links attached

Okay so let’s look at this step by step.

1. Put the markup in a variable

Before we were just echoing the markup, now it needs to go into a variable. This also means we need to alter our template tags for the permalink and post title, as the ones in use before would echo the content out, but we want to just return it so that it’s in the variable. So to do this we can use

	$sblinks = '<ul id="social">
<li>Bookmark this page at: </li>
<li><a href="http://del.icio.us/post?url='.get_permalink($post->ID).'&amp;title='.urlencode($post->post_title).'" title="Bookmark '.$post->post_title.' on Del.icio.us">Del.icio.us</a> - </li>
<li><a href="http://www.stumbleupon.com/submit?url='.get_permalink($post->ID).'&amp;title='.urlencode($post->post_title).'" title="Submit '.$post->post_title.' to StumbleUpon">StumbleUpon</a> - </li>
<li><a href="http://www.spurl.net/spurl.php?url='.get_permalink($post->ID).'&amp;title='.urlencode($post->post_title).'" title="Bookmark '.$post->post_title.' on Spurl">Spurl</a></li>
</ul>';

2. Check the option set

This is fairly straightforward. We just need to get the value of the option set by the options page

$attach = get_option('sboption');

3. Check on attachment and content, append links

This is where our if statement starts. We need to check that
a: We have some content passed through the action hook to the function
b: We have a setting to append the links to the content

if ($attach && !empt y($content)) :
	$content .= $sblinks;
	return $content;

4. Else if the content is empty

This is triggered if someone calls the function directly, as they won’t be passing content through to the function as a parameter, so we can just echo the links variable out instead.

elseif (empt y($content)) :
	echo $sblinks;
	return TRUE;

5. Else just return original content

Finally, if there is content but the option to append links is not set, then just return the content untouched.

else :
	return $content;
endif;

The action hook

Finally, we just need to add the action hook to get the function to run when ever post content is displayed using the_content() tag as the hook. We do this using

add_filter('the_content', 'display_sblinks');

The Final Code

So that gives us our final code for the full plugin which you can view/copy at Social Bookmark Links.

This file can just be added to your plugins directory and activated in your admin.

To target the list of links I recommend the following CSS:

ul.socialbm { margin-left: 0; padding-left: 0; }
ul.socialbm li {
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
}

Plugin Enhancements

This is only a very simple plugin with just one option. You could extend this by allowing the user to select which links / networking sites to display, whether to append the links to posts only or pages as well. You could add a class to each list item to allow you to insert the social bookmark icon next to each link. The plugin is very extendable and should allow you to experiment further with the code already there.

Creating a WordPress Plugin III


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

So to do this, first we need to create an options page. To add an options page we need to use an action which calls a function to add the page to the options menu, plus it tells that menu option which function to run for the options page (with me so far?!). So step 1, call the action

add_action('admin_menu', 'add_options_pg');

Second step is to create the function ‘add_options_pg’ which adds the menu option:

function add_options_pg() {
    add_options_page(Page Title, Menu Title, user level / capability, file, function name, icon url);
}

The above function takes the given parameters to create the menu label. For our plugin we could use

function add_options_pg() {
    add_options_page('Add Social Bookmarks', 'Social Bookmarks', 8, basename(__FILE__), 'sblinks_options');
}

You may noticed that I’ve omitted the last parameter. It’s not essential unless you want to give your plugin a menu icon that appears to the left of the label in the menu. The fourth parameter tells the function that the options page function is in the same file.

So now we’ve got the menu label and on clicking it, it will run the function sblinks_options(), so we need to set our page up within that. For a function page you need your processing script and then the page/form below it, wrapped within the same function. So for our page for our plugin we just need to give the option of whether to attach the output to the bottom of every page and post or not.

For our HTML we can use:

<div class="wrap">
 	<form id="options_form" method="post" action="">
		<h2>Manage Social Bookmarks</h2> 

		<div class="ui-sortable">
			<div class="postbox">
				<h3 class="hndle">Social Bookmark Options</h3>
				<div class="inside">

					<div><label for="sboption">Display after Page/Post?</label>
					<input type="checkbox" id="sboption" name="sboption" value="1" />
					</div>
					<div class="submit"><input type="submit" name="sb_submit" id="sb_submit" value="Update Options" /></div>
				</div>
			</div>
		</div>
	</form>
</div>

This outputs a simple form with a checkbox. The markup and classes used for the divs are already used in the WordPress admin so this will keep the page in the same design.

Now we need the code to process this form. As this is an option then we save it in the options table within the WordPress database. To do this we use the function update_option, ie.

if (isset($_POST['sb_submit'])):
	update_option('sboption', $_POST['sboption']);

	echo '<div id="message" class="updated fade"><p>Option Saved!</p></div>';
endif;

Here we’ve checked to see if the form has been submitted. Then we use the update_option to update the option value ’sboption’ with the value of the checkbox (0 for unchecked, 1 for checked). With the update_option() function, it checks to see if the option specified exists. If it doesn’t then it will add the option, if it does exist it will update the existing one, so it does two jobs in one. Once we’ve updated the option we can echo out the message that the selection has been saved. Again, the markup used fits in with WordPress’s own markup and will allow the message to fade in as it does on other pages.

So now we’ve got the form and the form processing script. Finally we need to check what the option currently is in the options table, so that the checkbox can reflect that. To do this we use the get_option() function to get the value of the option, ie.

if (get_option('sboption')) {
	$sboption = ' checked="checked"';
} else {
    $sboption = '';
}

As we’ve stored the option value as 0 or 1 then we can use a simple if statement to check the value of it. 0 will also give a false value, so if the value is 1 (ie. true) then our variable $sboption gets an additional piece of HTML markup to add to the form, making our checkbox checked. If the value is false then it’s just set to be empty. We can then insert this into our input code:

<input type="checkbox" id="sboption" name="sboption" value="1"< ?php echo $sboption ?/> />

This will then set the checkbox as checked if the option has been selected previously.

This now gives us the final code as:

< ?php
add_action('admin_menu', 'add_options_pg');

function add_options_pg() {
    add_options_page('Add Social Bookmarks', 'Social Bookmarks', 8, basename(__FILE__), 'sblinks_options');
}

function sblinks_options() {
    if (isset($_POST['sb_submit'])):
	update_option('sboption', $_POST['sboption']);

	echo '<div id="message" class="updated fade"><p>Option Saved!</p>';
    endif;

    if (get_option('sboption')) {
	$sboption = ' checked="checked"';
    } else {
        $sboption = '';
    }
?>

<div class="wrap">
 	<form id="options_form" method="post" action="">
		<h2>Manage Social Bookmarks</h2> 

		<div class="ui-sortable">
			<div class="postbox">
				<h3 class="hndle">Social Bookmark Options</h3>
				<div class="inside">

   					<div><label for="sboption">Display after Page/Post?</label>
       					<input type="checkbox" id="sboption" name="sboption" value="1" />
       					</div>
					<div class="submit"><input type="submit" name="sb_submit" id="sb_submit" value="Update Options" /></div>
       				</div>
       			</div>
		</div>
	</form>
</div>

< ?php } ?>

This can go into the plugin file that we created last week.

Next week I’ll conclude this plugin to show you how to alter last weeks function to check on the option and output the social bookmark links accordingly.

Creating a WordPress Plugin II


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

To start a plugin file off you use a PHP comment to contain the information about the plugin. This is:

< ?php
/*
Plugin Name: Put your plugin name here
Plugin URI: http://www.yourdomain.com/path-to-plugin-page/
Description: Plugin description here
Version: 1.0
Author: Your Name
Author URI: http://www.yourdomain.com
*/
?>

The above tells WordPress information about your plugin and this is the information that gets displayed on the plugins page in the admin section.

After this you can then add your functions and hooks/filters if needed. If we take the simple function we first looked at, to output social bookmarking links, then we would simply add the function below the comments eg.

<?php
/*
Plugin Name: Output Social Bookmarks
Plugin URI: http://www.bloggingtips.com/wordpress-plugins/social-bookmarks/
Description: Displays Social Bookmarks for the current post.
Version: 1.0
Author: SarahG
Author URI: http://www.bloggingtips.com
*/
function display_sblinks($cssid = "social") {
global $post;
?>
<ul id="<?php echo $cssid ?>">
<li>Bookmark this page at: </li>
<li><a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','',FALSE)); ?>" title="Bookmark <?php the_title() ?> on Del.icio.us">Del.icio.us</a> - </li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','',FALSE)); ?>" title="Submit <?php the_title() ?> to StumbleUpon">StumbleUpon</a> - </li>
<li><a href="http://www.spurl.net/spurl.php?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','',FALSE)); ?>" title="Bookmark <?php the_title() ?> on Spurl">Spurl</a></li>
</ul>
<?php
}
?>

You would save this as a standard PHP file and then put it in your plugins directory. When you then go into the plugins page you’ll see it as an unactivated plugin ie. just like any other plugin you’ve added to your site.

Next week I’ll explain how to give more flexibility and control over your plugins with an options page.

Creating a WordPress Plugin


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Category Page

The category page is quite similar to the single post page code that we saw last week, except that we use the single_cat_title() function along with the get_cat_id function to get the category ID of the page we’re on (get_the_category() wouldn’t work for category pages, as it’ll pick up all categories for the first post on the page and can potentially mess things up!) ie.

if (is_category()) :
	$pdata = get_cat_id( single_cat_title("",false) );
	$data = get_category_parents($pdata, TRUE, ' » ');

	$trail .= " » ".substr($data,0,-9);
endif;

The Archives

The archive pages can be for a day, month or year, so we need to cover all 3 potential options. Note, to reduce a database call I’ve used paths relative to the root so you may need to edit these if your WordPress install is within a directory.

Day Archives

For the Day archives we want it in the format of Year » Month » Day, with the year and month being linked. To do this we can use the following code:

if (is_day()) :
	$trail .= " &raquo; <a href='/".get_the_time('Y')."/'>".get_the_time('Y')."</a>";
	$trail .= " &raquo; <a href='/".get_the_time('Y/m')."/'>".get_the_time('F')."</a>";
	$trail .= " &raquo; ".get_the_time('l');
endif;

Here we check if the archive page is a daily archive page, if so then we use the tag get_the_time() to get the information about the archives. This tag accepts the various PHP Date formatting to determine what to display. Here I’ve used the Y to get the full 4 digit year eg. 2009, then for the month archive link I’ve used Y/m which would insert 2009/02 into our link. I’ve set the month anchor text however to use ‘F’ which will display the name in full.

Finally I’ve then set the day to display as its name in full, using the ‘l’ (lowercase L). This isn’t linked as you’re already on the page for this This will then give an output such as

Home » 2009 » February » Sunday

Month and Year Archives

For the Month and Year Archives we just adapt the above code for the day, slowly removing the additional ‘crumb’ at the end of the output, so for these two archives we use

if (is_month()) :
	$trail .= " &raquo; <a href='/".get_the_time('Y')."/'>".get_the_time('Y')."</a>";
	$trail .= " &raquo; ".get_the_time('F');
elseif (is_year()) :
	$trail .= " &raquo; ".get_the_time('Y');
endif;

Final Code

So our final function code, including the code from last week, should now be:

function write_breadcrumb() {
	$pid = $post->ID;
	$trail = "<a href='/'>Home</a>";

	if (is_front_page()) :
		// do nothing
	elseif (is_page()) :
		$bcarray = array();
		$pdata = get_post($pid);
		$bcarray[] = " &raquo; ".$pdata->post_title."\n";
		while ($pdata->post_parent) :
			$pdata = get_post($pdata->post_parent);
			$bcarray[] = " &raquo; <a href='".get_permalink($pdata->ID)."'>".$pdata->post_title."</a>\n";
		endwhile;
		$bcarray = array_reverse($bcarray);
		foreach ($bcarray AS $listitem) :
			$trail .= $listitem;
		endforeach;
	elseif (is_single()) :
		$pdata = get_the_category($pid);
		$data = get_category_parents($pdata[0]->cat_ID, TRUE, ' &raquo; ');

		$trail .= " &raquo; ".substr($data,0,-8);
	elseif (is_category()) :
		$pdata = get_cat_id( single_cat_title("",false) );
		$data = get_category_parents($pdata, TRUE, ' &raquo; ');

		$trail .= " &raquo; ".substr($data,0,-9);
	elseif (is_day()) :
		$trail .= " &raquo; <a href='/".get_the_time('Y')."/'>".get_the_time('Y')."</a>";
		$trail .= " &raquo; <a href='/".get_the_time('Y/m')."/'>".get_the_time('F')."</a>";
		$trail .= " &raquo; ".get_the_time('l');
	elseif (is_month()) :
		$trail .= " &raquo; <a href='/".get_the_time('Y')."/'>".get_the_time('Y')."</a>";
		$trail .= " &raquo; ".get_the_time('F');
	elseif (is_year()) :
		$trail .= " &raquo; ".get_the_time('Y');
	endif;

	return $trail;
}

The above code uses a right angled quote to separate the links however the most suitable markup for this is to use a list (except WordPress didn’t want me to paste that into the post!) so if you would rather use a list you can download the complete function, and just insert it into your functions.php file.

Remaining Pages

You may think, what about the other pages – tags, author pages and search results. I’ve not done this as the only page ‘above’ them is the home page, however if you wanted to add them in then you could use the correct conditional for each and just extend the if else statement above. These conditionals are is_tag(), is_author() and is_search().

Create a Breadcrumb Trail II


A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/