Keith Devon

Menu

Tag: WordPress

How (and why) to use Schema.org on your WordPress website

Search engines have a big problem. There is so much data out there and it’s hard to work out what is what.

Humans are great at inferring the context of web content, but this is much more difficult for Google, Bing, Yahoo!, etc..

That’s why the biggest search engines have come together to create a standard way to add structured data to your website. What they have created is called Schema.org. In their words:

Schema.org is a joint effort, in the spirit of sitemaps.org, to improve the web by creating a structured data markup schema supported by major search engines

https://schema.org/docs/faq.html#0

Why you should be using Schema.org markup

You’re probably still wondering why you should take the time to add Schema markup to your website. The simple answer is that it will probably improve your search traffic. Google, and other search engines, want to display the most relevant search results. If it’s clear what your web page is about, then it’ll have more confidence in it’s relevance. Here’s what they have to say on the topic:

These projects help you to surface your content more clearly or more prominently in search results.

https://schema.org/docs/faq.html#9

Google back this up on their website:

When your web pages include structured data markup, Google (and other search engines) can use that data to index your content better, present it more prominently in search results, and surface it in new experiences like voice answers, maps, and Google Now.

https://developers.google.com/structured-data/

While Google won’t come out and say that using Schema.org will definitely have a positive impact on your search rankings, they don’t deny it either (see their ambiguous answer here: https://www.youtube.com/watch?t=57&v=OolDzztYwtQ). But what they do say is that it’s likely to help your content to be presented more prominently, which is often as part of rich snippets (I’ll explain these below).

While using Schema.org markup may not improve your search rankings (yet!) it will help to give your content more prominence on search results pages.

Is everyone using Schema.org markup?

In my experience Schema.org markup is still underused. There are clear benefits, yet adoption seems to be slow. In fact a study by searchmetrics in 2014 found that only 0.03% of domains tested had Schema.org integration.

THIS IS A GOOD THING! It means that you can easily get ahead of your competitors instead of always playing catch-up.

Don’t just take my word for it. The SEO experts over at Moz agree…

If someone told you that there was a quick and easy way that many of you could improve your SERP CTR for minimal effort, you’d all stop in your tracks and give them full attention. Yet, Schema.org and rich snippets are still horribly under-utilized.

http://moz.com/blog/schema-examples.

Schema.org and rich snippets

Let’s have a look at how the search engines are using Schema.org data today. The most visible examples are reviews. Search for “cube agree gtc reviews” (it’s a bike) in Google and you’ll get something like this:

Search results page for bike review

See all of those stars? These are what’s known as “rich snippets”. That content is being pulled from Schema.org data. How do I know? Let’s have a look at the code.

The top result is from cyclingweekly.co.uk (a site I worked on). If we click on that link and inspect the code we can see this:

Cycling weekly review code

Can you see the itemtype="http://schema.org/Rating"? That’s the markup that has been added to give context to the content. The rating itself is defined by the meta tags below, also with Schema.org markup.

Let’s look at the BikeRadar code (the third search result) to see if they are using it too.

Bike Radar review code

Yep! There it is again. I don’t think there’s any coincidence that these two websites are at the top of the search rankings. Don’t get me wrong, there are other factors at play, but clearly Google is making use of this data to provide relevant search results.

I’m sure you don’t all have review based websites, so let’s look at another example. Here are the top search results for “Kawehi tickets”:

Search results for Kawehi tickets

Google knows the date, and venue of the next three events near me. Again, these sites are using Schema.org markup.

Reviews and events are just two common uses. Some of the other prominent uses are:

I bet some of you are thinking “none of those apply to my business”. You might be right, but there are other Schema.org ‘properties’ that you can use.

LocalBusiness

https://schema.org/LocalBusiness

You can add markup that explains your business. This is perfect for smaller local businesses, or local branches of larger organisations. Some of the data that you can pass include (but not limited to):

Blog and BlogPosting

If you’re using WordPress there’s a good chance you have a blog on your website. Schema.org provides Blog and BlogPosting properties that you can use to add structured data to your posts. You can add:

  • Headline
  • Text
  • Date published
  • Author
  • and a lot more

Adding Schema.org markup to your WordPress website

Because Schema.org markup is so closely integrated with your site content and code, it’s not always an easy addition to your site.

There seem to be some plugins that claim to help, https://wordpress.org/plugins/tags/schemaorg, but I don’t have any experience with those, and I’d question how exactly they can know where that data is within your theme code.

Another option is themes with Schema.org baked in. These are most commonly directory style themes.

Finally you could ask your developer to add some schema markup to your theme where you think it will be appropriate and useful. It actually doesn’t take long to add the appropriate markup, so shouldn’t be too costly, and it will avoid having to add yet another plugin.

Schema.org markup for a blog post

Let’s have a look at one of the most useful implementations of Schema.org markup – blog posts.

If you visit https://schema.org/BlogPosting you’ll see a long list of potential properties to add. I’m going to focus on the basics here, you can always add more depending on your content.

The first thing to do is to define the scope of your blog post as a ‘BlogPosting’. Your post might start like this:

<article itemscope itemtype="https://schema.org/BlogPosting">

Now let’s start adding some of the basic properties. Firstly, let’s add the ‘headline’. You can do so like this:

<h1 itemprop="headline"><?php the_title(); ?></h1>

Next we’ll add some of the post meta data, starting with the published date.

<time pubdate itemprop="datePublished" datetime="<?php the_time( 'c' ); ?>" content="<?php the_time( 'c' ); ?>">

<?php the_time( get_option( 'date_format' ) ); ?>

</time>

We could add more microdata here, like ‘pubdate’, but I’ve left that out for the sake of simplicity.

Tags and categories can also be given the Schema.org treatment:

<div>Categories: <span itemprop="about"><?php the_category(', '); ?></span></div>
<div>Tags: <span itemprop="keywords"><?php the_tags(''); ?></span></div>

We can also mark up the author information. Google has recently removed it’s ‘authorship’ rich snippets, but this data could still be used in the future.

<div itemprop="author" itemscope itemtype="https://schema.org/Person"><img itemprop="image" src="<?php echo get_avatar_url( get_avatar( get_the_author_meta( 'ID' ), 150 ) ); ?>" />
<span itemprop="name"><?php the_author();?></span>
</div>

I’ve used a custom function to get the author avatar URL. The code is from this WordPress Development question.

The last bit of Schema.org markup that we’ll add for now is the actual content of the blog post. This one is easy:

<div itemprop="text"><?php the_content(); ?></div>

The complete code would look something like this:

<article itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h1 itemprop="headline"><?php the_title(); ?></h1>
<time pubdate itemprop="datePublished" datetime="<?php the_time( 'c' ); ?>" content="<?php the_time( 'c' ); ?>">
<?php the_time( get_option( 'date_format' ) ); ?>
</time>

<div>Categories: <span itemprop="about"><?php the_category(', '); ?></span></div>
<div>Tags: <span itemprop="keywords"><?php the_tags(''); ?></span></div>

<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<img itemprop="image" src="<?php echo get_avatar_url( get_avatar( get_the_author_meta( 'ID' ), 150 ) ); ?>" />
<span itemprop="name"><?php the_author();?></span>
</div>

</header>

<div itemprop="text">
<?php the_content(); ?>
</div>

</article>

Does your site already use Schema.org?

If you’re wondering if your theme already has Schema.org (or other structured data) this is a brilliant tool: https://developers.google.com/structured-data/testing-tool/.

Closing thoughts

In my opinion structured data, including Schema.org is going to become more and more important. As the internet gets bigger search engines will have more content to sift through, and will have to deliver it in new ways. If your content is well structured, you’ll be at an advantage over your competition.

If you have any questions about Schema.org markup I’d love to hear from you.

Keith

Useful links

WordPress $is_iphone global

OK, why did nobody tell me about this, and why is it not documented!

I just found out today that WordPress does some browser detection of its own. I’ve previously relied on other code libraries for this, but maybe now I can use the ‘WordPress Way’.

Detecting mobile in WordPress using $is_iphone

In wp-includes/vars.php there is the following declaration:


global $pagenow,
$is_lynx, $is_gecko, $is_winIE, $is_macIE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone, $is_IE,
$is_apache, $is_IIS, $is_iis7;

So it looks like WordPress detects a number of browsers. The $is_iphone variable is interesting because it seems to work as a general ‘mobile’ detection. I have it working to detect the Android ‘Internet’ browser.

I’ll add more here as I play with the possibilities.

The Tools of the (WordPress Freelance Development) Trade

I’ve been freelancing for a while now. I’ve also been developing WordPress sites for a while. In that time I’ve used many different tools. Some have been great, and some less great. Here I share a list of the tools that I’m currently using:

Accounting

I use the excellent FreeAgent* to keep track of my estimates, invoices, expenses, bills, tax and more. FreeAgent actually makes filing expenses, dare I say, fun!

You can get valuable overviews of your business, so that you can finally feel in control. To check out FreeAgent click here*.

* Those are affiliate links, but guess what, if you follow those links, not only do I save some cash, you do too!

Time tracking

I’ve been using Toggl for years now. It’s a really simple time tracking tool with some clever features (here’s a good review: https://thefreelanceeffect.com/toggl-review/). It also integrates with my favourite project management tool…

Project management

The mighty Basecamp has been an industry standard for years now. I haven’t updated to the ‘new Basecamp’ yet, I find that Basecamp ‘classic’ still does everything that I need it to, with all the integrations that I need.

Design

Wireframing

I’ve faffed about for too long trying to keep up with free wireframing tools. So, I’ve just signed up to Mockingbird, which is an online wireframing tool. It’s not free, I pay $9/month for the ‘Personal’ plan. There might be better ones out there, but this does the trick for me.

Graphics

I’ve been using Adobe’s Photoshop for years. It’s probably time that I upgraded though, I’m still on CS3.

Web development

Text editor

Coda, by Panic, has been around for ages. I started using it because Chris Coyier did and I’ve stuck with it. There are some nice features beyond what you would expect (including a WordPress plugin for code completion and syntax highlighting). I hear that there is even more fun to be had with Coda2.

Local development environment

I’m on a Mac, so I started off using MAMP. MAMP makes it pretty easy to set up and run a local Apache, MySQL and PHP stack. This allows you to install websites on your machine, making development much quicker and safer. If you aren’t doing this already, do it now!

I’ve since upgraded to MAMP Pro, which allows me to easily create local domain names. So, instead of using localhost/mysite.com, I can use kdev.mysite.com (or anything else for that matter!). MAMP Pro also allows you to access your local server remotely, although I haven’t tried that yet.

FTP client

FileZilla is my FTP client of choice. I can’t compare it to others, but it’s always done the job for me. It’s free.

Browser

If you’re not using Google Chrome, chances are you should be. I’ve found it to be quicker than Firefox, and I prefer the developer tools to Firebug.

 

I hope that helps. If you have any thoughts or suggestions, I’d love to hear them in the comments.

WordPress Security

Since I listened to Kieran O’Shea’s talk at WordCampUK, I’ve been taking security much more seriously. Kieran had some pretty scary statistics regarding hacking. For example, 90% of all businesses have been hacking victims in the last 12 months, and, there is an average of 156 days before victims realise that hacking has taken place.

Having your site hacked is bad news. There are many ways in which a site can be hacked, and many outcomes, but be assured that none of them are pleasant.

Luckily there are things that you , as WordPress site owners, can do about it.

User names and passwords

This is my absolute number one tip, use strong username and password combinations.

I recently had my PayPal account hacked because I used the same username and password everywhere. Eventually, I either signed up to a fake site, or a site I registered with was hacked. Either way, once the hackers had my details they could access everything of mine online.

Here are some rules to follow:

  1. Don’t use ‘admin’ as a username.
  2. Use a strong password.
  3. Use a unique password.

If you have a user called ‘admin’ set up a new user with administration privileges and then go and delete the ‘admin’ user. Do it now!

WordPress will tell you if your password is strong or not. If it isn’t, think of another one.

Since my PayPal incident I’ve started to use unique passwords for nearly every site that I use. I know that it sounds daunting, but there are ways to manage passwords (check out 1Password).

WordPress updates

Keeping up to date with the latest version of WordPress and especially the security patches is my next biggest tip.

As of writing WordPress is at version 3.4.1. They are constantly releasing security patches and other major upgrades. Keep ahead of the hackers by having the latest version installed.

Warning: back up your site fully before installing updates, especially point releases, i.e. moving from 3.4.1 to 3.5.

Sometimes upgrades will break your themes or plugins. This is just the way it is. Nobody can predict the future, but the best themes and plugins should be more future proof.

If you run into problems with upgrades, revert to your backed up version and contact your WordPress professional. Ideally, have your pro do the upgrade, testing and bug fixing for you.

I will be offering my clients upgrade services. Please contact me to discuss upgrading your site.

Helpful plugins

There are some really helpful security plugins on the market:

Security

Backups

If you need help or advice regarding security please get in touch.

Custom Post Types

Last night I gave a presentation at the WordPress London meetup. I talked about custom post types in WordPress, something that has really excited me since WordPress 3. I’ve included the video, a rough transcript of the presentation and the slides at the bottom.

What we’ll cover

  • What are custom post types
  • When to use them
  • How to use custom post types
  • Taking things further
  • Resources

What are custom post types?

I’ve searched high and low on the internet for a decent definition of custom post types, with no luck. The best that I’ve seen is that they are really custom content types.

Replacing the word ‘posts’ with ‘content’ gives us a much better understanding of what custom post types are all about. The idea is that there is some content on your website that might not fit neatly into the typical page’ or ‘post’ mould. Think of the following examples:

  • Movies
  • Staff
  • Podcasts
  • Books
  • Products
  • Portfolio items
  • Testimonials, etc, etc.

Then why are they called custom post types?

Within WordPress there are already various post types: posts, pages, menus and revisions. With version 2.9 came the ability to define your own, ‘custom’, post type. These are stored in the wp_posts table. Hence custom post types.

When to use custom post types

Here is a fairly typical client request:

“I want to create a website for my holiday home rentals company. I have a portfolio of 20 properties that I want to be able to manage and update. Each property has the following information:

  • Name
  • Address
  • Short intro
  • Full property description
  • An image
  • Price per week
  • Number of rooms

I would like the user to able to sort the properties by ‘Price’ and ‘Number of rooms. I will also be blogging on the site.”

Without custom post types

In those dark days before WP 2.9 I probably would have used posts for the properties. I then would have created a category of ‘properties’ so that I could style those property posts differently than the regular blog posts. I then would have used custom fields for the meta data – rooms and price.

This used to work, but it was an ugly solution, a ‘hack’. The property posts would be mixed in with the regular blog posts both in the admin and the front-end.

Enter, custom post types

With custom post types we can separate our content into logical groups. Posts are now just chronological blog/news items again and properties have their own section.

This also makes theme development easier. The posts and properties are no longer lumped together, so no need to hack the index.php loop. New templates are available specifically for your properties post type too.

Basically, using custom post types is going to seriously improve workflow for both you and your client.

How to use custom post types

Creating your custom post type

Before I start, I have to tell you that there are ways to create custom post types on your WordPress site without having to touch a single line of code. There are several plugins and online code generators that will do it all for you. However, I strongly encourage you to have a go at this yourself. Even if this is the first bit of theme development that you have done, give it a go. You’ll have a much better idea of what’s going on and you’ll find it so satisfying.

Open up your theme’s functions.php file using your favourite text editor, and add the following:


add_action( 'init', 'create_my_post_types' );

function create_my_post_types() {
register_post_type( 'kdev_properties',
array(
'labels' => array(
'name' => __( 'Properties' ),
'singular_name' => __( 'Property' )
),
'public' => true,
'has_archive' => true,
'supports' => array('title','editor','excerpt','thumbnail'),
'rewrite' => array( 'slug' => 'property' ),
'register_meta_box_cb' => 'add_property_metaboxes',

)
);
}

This code is all we need to get custom post types working on our WordPress site. in fact, it’s more than we need, I’ve added a few lines, 11, 13 and 14, that aren’t essential but useful for what we’re trying to achieve.

Line 4 is where the magic starts, we’re registering our post type and giving it a name. I’ve prefixed the name with ‘kdev_’ to avoid clashes with any other plugins.

Line 6 starts the ‘labels’ array and at this point we’re only using two labels ‘name’ and ‘singular_name’. These will appear in our theme instead of the ugly ‘kdev_properties’. There are lots more labelling options, check them out here http://codex.wordpress.org/Function_Reference/register_post_type#Arguments.

Line 10 is telling WordPress to make the post type public, that is visible, in the admin and front-end. Strangely this defaults to false, so you must include it if you want to see your post type.

‘has_archive’ on line 11 is optional. I’m using it to tell WordPress that I will be using a custom archive template.

The ‘supports’ array on line 12 is where it starts to get interesting. Everything that you are familiar with from posts and pages are available to you here. I’m just enabling the elements that we’ll need for our property post type.

Line 13 enables a URL rewrite. This changes our URL structure from kdev_properties/propertyname to property/propertyname (assuming we’re using a ‘pretty’ permalink structure).

The last line, 14, is telling WordPress that I wish to use a custom meta box on this post type. this will be explained in greater detail later on.

Now log in to your WordPress admin area and you should see something similar to the following:

You can see that our custom post type, ‘properties’, has been added to the main menu, keeping it separate from posts and pages.

If you click on the ‘Properties’ link and then ‘Add New’ you will get to the following screen.

Here we can see the ‘supports’ array in action. We’ve added some useful functionality here but it’s also important to note what we’ve left out. The categories and tags that we are familiar with from posts are gone, as are page attributes, revisions, comments and discussions. This leaves us with a nice clean UI. There are no extraneous admin elements to distract the user.

Our code hasn’t just created a great admin screen, it’s also enabled us to view our custom post type live on the site. From the ‘Edit Post’ screen, click on ‘Preview’ to see what your post will look like (add some content first for a better effect!). You’ll see something like this:

That’s great so far, but the chances are that you’ll want your custom post type to look slightly different to regular posts. WordPress gives us two template files to do this; single-[posttype].php and archive-[posttype].php.

The single template will let you style your individual custom post types, in our case the single property page. It’s often easiest just to create the new template file (e.g. single-kdev_properties.php), in your theme directory, and copy and paste the code from your theme’s single.php file. Then you can make any changes that you require. Before you do that though, there are some more tricks that will help you make your custom post type really come to life!

The archive-[posttype].php template will create a page that displays a list of your custom posts. Using the same idea as above, you can copy and paste from your index.php file and edit from there. Remember the ‘has_archive’ argument that we added? That line is telling WordPress to use our custom archive file.

Congratulations! You’ve created your first custom post type. That wasn’t too hard was it? There is loads more that we can do with our custom post type.

Taking things further

Remember the original client request? She wanted to be able to add ‘price’ and ‘number of rooms’ data to her properties. Of course, we could just add this to the main text editor, but then it would be tricky to separate the data if we wanted to use it by itself. This is where custom meta boxes come in.

Custom meta boxes

Here’s where custom post types start to get really cool. We’re not limited to the ‘title’, ‘excerpt’, etc. that WordPress provides us with. We can add new boxes to our edit screen that accept any kind of data that we can think of.

Here’s an example of some meta boxes:

The first meta box is a simple text field, the second a radio button. You could have checkboxes, text-areas, TinyMCEs, etc. By now your imagination should be kicking in to show you the possibilities available!

We want two meta boxes, one for price and one for rooms. Here’s the code that we need to achieve this:


//Add custom meta box

// Add the Properties Meta Boxes

function add_property_metaboxes() {
add_meta_box('kdev_properties_rooms', 'Number of Rooms', 'kdev_properties_rooms', 'kdev_properties', 'side', 'default');
add_meta_box('kdev_properties_price', 'Price per week', 'kdev_properties_price', 'kdev_properties', 'side', 'default');
}

// Output the Property metaboxes

function kdev_properties_rooms() {
global $post;

$prop_rooms = get_post_meta($post->ID, '_rooms', true);

echo '<label>Rooms</label><input class="widefat" name="_rooms" type="text" value="' . $prop_rooms . '" />';
}

function kdev_properties_price() {
global $post;

$prop_price = get_post_meta($post->ID, '_price', true);

echo '<label>Price per week</label><input class="widefat" name="_price" type="text" value="' . $prop_price . '" />';
}

// Save the Metabox Data

function kdev_save_property_meta($post_id, $post) {
if ( 'kdev_properties' == get_post_type() ) {

if ( !current_user_can( 'edit_post' , $post ->ID )) return $post ->ID;

$property_meta['_rooms'] = $_POST['_rooms'];
$property_meta['_price'] = $_POST['_price'];

foreach ($property_meta as $key => $value) { // Cycle through the $property_meta array!
if( $post->post_type == 'revision' ) return; // Don't store custom data twice
$value = implode(',', (array)$value); // If $value is an array, make it a CSV (unlikely)
if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
update_post_meta($post->ID, $key, $value);
} else { // If the custom field doesn't have a value
add_post_meta($post->ID, $key, $value);
}
if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
}
}
}

add_action('save_post', 'kdev_save_property_meta', 1, 2); // save the custom fields

This is a bit more complex and I won’t go through every line. Add this to your functions.php file and make sure that the variable names are correct (if you have used something other than ‘kdev_properties you’ll need to change it here too).

There are some arguments that you may wish to tinker with. Remember, you won’t learn if you don’t make mistakes, so don’t be scared. It’s always a good idea to make backups before you start experimenting though, especially with a live site.

Adding that code will give you something like this:

Check out those custom meta boxes on the right! Sweet.

As cool as it is to have custom meta boxes, they’re not going to do anything for you without a bit of work to your template files.

Open up one of your custom template files and add the following:


Price per week: £<!--?php echo get_post_meta(get_the_ID(), '_price', true); ?-->

Number of rooms: <!--?php echo get_post_meta(get_the_ID(), '_rooms', true); ?-->

The get_post_meta() function is creating all the magic here. It takes a few arguments, the post ID, the meta key, and whether to return a single string or an array (‘true’ will return the string).

I’ve added those lines to my custom archive template to get the following:

Nice work. Our custom post types have meta boxes and we have some pretty nifty templates. There’s one more part to the holy trinity of custom awesomeness…

Custom taxonomies

Taxonomies are ways to classify your data. If you’re familiar with WordPress you will already be using them; categories and tags. These are both taxonomies, but they are very general, and you’ll probably want to keep these for your blog posts.

For our custom post types we can create our own custom taxonomies. There are two main types; hierarchical and, erm, not.

Hierarchical taxonomies

Hierarchical taxonomies have the concept of parents and children, like categories. You can create tree like structures of nested classifications.

Non-hierarchical taxonomies

These are like post tags. They don’t have parents or children.

Creating a custom taxonomy

function my_register_taxonomies() {

register_taxonomy(
'area',
array( 'kdev_properties' ),
array(
'public' => true,
'labels' => array( 'name' => 'Area', 'singular_name' => 'Area' ),
'hierarchical' => true,
)
);
}

add_action( 'init', 'my_register_taxonomies' );

This is all we need to create a custom taxonomy for our custom post type. I’ve given it a name, assigned it to the ‘kdev_properties’ post type and given it some arguments. Again, have a play around. The code can be added to your functions.php file as before.

And so we have it. Well done for getting to the end!

Hopefully, you’ll be inspired to use custom post types on your next project. You’ll never look back, I promise.

Resources

http://codex.wordpress.org/Post_Types
http://codex.wordpress.org/Function_Reference/register_post_type

Plugins

http://wordpress.org/extend/plugins/custom-post-type-ui/
http://wordpress.org/extend/plugins/custom-content-type-manager/

Posts

http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress
http://devpress.com/blog/conditional-checks-for-custom-post-types/
http://css-tricks.com/forums/discussion/8538/wordpress-3.0-custom-post-types-and-meta-boxes/

Easy meta boxes with WPAlchemy

WPAlchemy MetaBox PHP Class

The slides

 

WordPress London meetup #5

The group continues to go from strength to strength with at least 30 members attending.

This month’s meetup included a talk from BuddyPress developer Paul Gibbs. He talks us through the new release, the epic version 1.5.

Paul’s blog post, with slides, can be found here: http://byotos.com/2011/09/27/buddypress-at-wordpress-london-220911/.

Then Jeff Ghazally shows us how easy it us to sell music online using WordPress and the WP E-commerce plugin.

We also had a great presentation from Shakur about the SOLR search plugin and how it can be used to improve the search performance and capabilities on your WordPress site. Unfortunately due to technical difficulties (an over-heated camera!) we didn’t get this one on video. Sorry Shaksi!

Beginner WordPress Theme Development

Last Thursday (28th July 2011) we held the third London WordPress meetup. The meetup is for WordPress users and professionals in London and aims to provide a networking and learning platform.

I gave a talk on Beginner WordPress Theme Development, which introduced the basic structure of a theme and some key concepts. Here are the presentation ‘slides’ and the video.

Spinning Update progress on WordPress pages

Spinning Progress Wheel

One of my clients recently informed me that a site that I had built had a problem; when some pages were published or updated, the progress wheel would spin until the browser eventually timed out.

It had been a month or so since I had finished the site development and there had been lots of new content and plugins added. I turned on the WordPress debugging and got to work.

Finding the problem

There were a lot of errors being generated, mostly from plugins but also from WP itself. I also noticed a few memory limit issues which I fixed using the .htaccess file.

I got to work isolating the various components. All plugins, themes and content were tested to no avail. Next up I installed the site on different servers. I looked at the database for anomalies, contacted the hosting provider, nothing.

Lying in bed last night I couldn’t sleep, I had to give it another go. I did some more tests on what I thought was the offending plugin and associated database table. Still no joy. In one last ditch attempt I did various Google searches of the symptoms. I jumped from forum to forum and followed links all over the place.

Got it!

Then I found it. The custom permalink structure of “/%category%/%postname%/” that I have used on nearly every site was the culprit. Now, someone please correct me if I’m wrong, but I’m sure the WordPress codex used to give that exact structure as an example of how to implement “Pretty Permalinks”. Not any longer. Apparently that structure causes performance issues on sites with lots of pages. For every page a whole new set of rewrite rules are created until the system just can’t process it any more.

The solution is to use a non-verbose entry at the start. For example %year% or %month% or both are ideal but %category%, %postname%, %tag% and %author% should be avoided.

Fortunately, the codex has been updated to advise against this practice and the new example “pretty permalink” is /%year%/%postname%/.

Lessons learned

For most site you can probably get away with the offending structure. In fact many SEO and WordPress ‘gurus’ recommend it. Just be warned that if your site grows in terms of pages then you may encounter this problem in the future.

Some of the lessons that I’ll take with me:

  • Keep up to date with changes to WordPress documentation and best practices.
  • Clearly define who takes responsibility for WordPress faults in your project contract.
  • Never give up!

Internal Link Layout Issue

I recently came across an unusual problem when using internal links on a WordPress site. The link in question linked from one page on the site to a specific section on another page of the same site. When this link was followed there was an error with the page layout. More accurately, the new page layout was technically correct and the rest of the site was wrong.

I struggled for a while trying to find the source of this problem. I looked at the ‘error’ page in firebug and compared it to a normal page on the site. On all other pages there was a mysterious magin (or padding) created at the top of a div but when this page was visited from the link the margin/padding disappeared.

Long story short, the div in question was set to overflow:hidden. When I commented out that line, the problem resolved itself. Why? I don’t know. Can anyone shed any light on this?

Custom Post Type Archive Pages – WordPress

Need to show your custom post types on your category archive pages?

Add this to your functions.php file:

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
  if(is_category() || is_tag()) {
    $post_type = get_query_var('post_type');
	if($post_type)
	    $post_type = $post_type;
	else
	    $post_type = array('post','cpt'); // replace cpt to your custom post type
    $query->set('post_type',$post_type);
	return $query;
    }
}

Now change the variable ‘cpt’ to the registered name of your custom post type, and voila!

A big thanks to parandroid over at http://wordpress.org/support/topic/custom-post-type-tagscategories-archive-page?replies=16 for this one.

WordPress Custom Post Templates

Once you have built a Wordpres custom post, you will often want to style it using it’s own template.

I searhed the web for a solution and courtesy of twothirdsdesign, if found the answer.

The template used for a custom post view is decided by the ‘get_single_template()’ function in the wp-includes/theme.php file.  And it basically tells locate_template() to look for single-’post_type’.php or single.php.

So the simplest way to customise the way a custom post is displayed is to add a template file to your theme with the name single-xxxxxx.php

Simples!