That’s a big issue in times where search engines are favoring fast loading websites. It also may mean that you have to upgrade your hosting to keep up with the performance requirements of your website.

P3, Plugin Performance Profiler, is a free WordPress plugin that analyzes the performance of frontend plugins. Frontend plugins are all plugins that are executed during page loading time.

Installation

Just open Plugins > Add New in your WordPress admin dashboard and search for P3. Click on the Install Now link to install the plugin, and on Activate on the next screen to activate it. You can alternatively download it from the official WordPress Plugin repository to install it manually on your blog.

Usage

Open Tools > P3 Plugin Profiler and click the Start Scan button to run the standard scan. The program will load several posts and pages from your site to calculate individual plugin performance data. You can alternatively run a manual scan instead, which allows you to pick the pages and posts that you want to load on the site. The benefit here is that you can specify exactly which posts and pages you want to use for the sample.

Once done, results are displayed in the program interface.

You should now see the average plugin impact on the site’s load time, the number of MySQL queries that are run per visit and a runtime breakdown by plugin.

If plugin impact appears to be to high, or if you have a plugin installed that is using a lot of resources, you may want to consider replacing it or removing it completely from the site. You can deactivate plugins before you run the test again to see if the deactivation has a positive impact on the frontend page loading times. You could furthermore install an alternative to see if it is lighter on the resource side.

There is however no option to compare scans with each other, which is unfortunately. It is also not clear why the performance profiler itself is listed in the results, as it does not really make a whole lot of sense.

Still, if you are hearing complaints from readers or are noticing server peak load times and resource usage, you may want to check out the Plugin Performance Profiler plugin to see which plugin may be causing it.

I also noticed that articles with hundreds of comments were loading significantly slower than pages with less comments. This made me reduce the number of comments per page to 50 root comments (plus their answers).

Today I noticed that WordPress added another JavaScript to ever page. The script in wp-inlcudes/l10n.js that is related to the admin bar that the WordPress developers added to one of the recent versions of the blogging platform.

While it is a small file with a size of 233 bytes it is still a script that is loaded by anyone, not just the admin of the blog. This somehow does not make a lot of sense. The important thing here is that the blog needs to make the request to load the element, not the time it takes to load the 223 bytes.

WordPress administrators may want to remove the JavaScript element from being loaded by every blog visitor to speed up the blog’s page loading times. The easiest way to remove the l10n.js from being loaded with WordPress is to unload it in the functions.php file in the WordPress theme folder.

All you need to do for that is to add the following line of code to the end of the functions.php file.

wp_deregister_script('l10n');

Please note that this may disable part of the admin bars toolbar functionality. Users over at Stack Exchange have found a way to keep the JavaScript loaded for administrators of the blog.

if ( !is_admin() ) {
function my_init_method() {
wp_deregister_script( ‘l10n’ );
}
add_action(‘init’, ‘my_init_method’);
}

Just add this code instead to the functions.php file.

It is still a mystery to me why the developers thought it was a good idea to change the default plain HTML editor textarea font in the WordPress admin interface.

If you are like me, you prefer the old font, especially if you are used to working with the HTML editor of the admin area.

It is thankfully though not complicated to switch back to the old font. All you need to do is to replace or edit one file of your WordPress installation.

CSS is used both on the blog’s frontend and backend to format elements. Lets take a look at the new font of the WordPress 3.2 admin interface.

new wordpress font

To change the WordPress admin interface to this

you need to edit the file wp-admin.css located in the wp-admin/css directory. Make a backup of the file before you start editing it. Open it in your favorite text editor and search for the string #editorcontainer

You should see code that looks like the following:

#editorcontainer #content{font-family:Consolas,Monaco,monospace;padding:6px;line-height:150%;border:0

Notice the font-family setting? To change the font all you need to do is to add another font in front. I have added Verdana which you can see in the second screenshot of the admin interface. The code for Verdana would look like this

#editorcontainer #content{font-family:Verdana,Consolas,Monaco,monospace;padding:6px;line-height:150%;border:0

You can also change the padding and line-height there to get better values as well if you want.

I know that some of you may not be comfortable editing css files on their own. I have uploaded the new wp-admin.css file to my server, and you can download it from this link: wp-admin.css.

Just copy the file to the wp-admin/css/ section of your WordPress blog and you should see the new font when you reload the admin page. The only change in the file is the new font. If you want to change line height, padding or other values you need to do that on your own.

Update: Files and edits you need to edit have changed in WordPress 3.3.1 as John Petrie points out. It is now necessary to edit the wp-includes/editor-buttons.css file, and change the style information of wp-editor-area. Thanks John for posting your solution.

For example, many posts benefit from a nice, clean thumbnail seated just to the left of the title of your posts. Such images break up otherwise monotonous, similar posts into individual units with their own appearance and characteristics. They can make the difference between an unattractive blog blanketed in text and an interesting web magazine with illustrations.

To implement these thumbnails you need to tell WordPress to look for the specific images you want and then to add them itself. You can do this by creating a field in each post called customimage which, when found, will tell WordPress to make the image appear. On the off chance that you do not add the customimage field to a particular post, you want WordPress to instead display a default image.

To begin, select an image that you would like posts to display by default. This could be your face, your dog, a speeding car – really, it’s completely up to you. Open the image in your favorite editor (Gimp, Paint.net or any other image editor that you may have at your disposal) and set it to whatever pixel dimensions you prefer. Be mindful that regardless of how long your blog title is, your photo will always be the same size. Somewhere between 150 by 150 and 250 by 250 pixels is probably a safe bet, and square boxes are easier to place various images in later, as opposed to rectangular ones. Once you have a nice image name it something you can remember (standard.gif, default.gif, etc.).

Next, upload the default image into your theme’s image directory. This makes it available to all pages of your site and any post missing the customimage field.

Now for the important part: post the following code into the index.php file of your WordPress wherever you would like the thumbnails to appear:

<?php $postimageurl = get_post_meta($post->ID, 'customimage', true);

if ($postimageurl) {

?>

<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="200" height="200" /></a>

<?php } else { ?>

<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/yourwebsite.gif" alt="Screenshot" width="200" height="200" /></a>

After you are finished copying over the code and pasting it in index.php, save the file. Your posts will now place whatever image you chose as your default (customimage) earlier beside each entry. That’s good, but you really want to be able to change that image – the point of this entire exercise is to make each post different.

All that you need to do is create a custom field with each entry called customimage (not in italics, of course). Change the value each time to the URL of whatever image you would like to display beside the particular post and you will be set to go. Enjoy having a unique thumbnail beside each post, unless you allow it to fall to the default.

Images clearly make for a more attractive blog post for the majority of readers. Are you one of those? Photos attract, so make sure that you blog is attractive and attracting.

Update from Martin:

You do not necessarily have to paste the code into index.php. You can alternatively paste it into single.php for individual posts, category.php for categories or tags.php for tags.

If you are not familiar with web development you may want to select a theme that supports post thumbnails out of the box. There are even some that take the first image of each post automatically and use it as the post thumbnail provided that you have not added a thumbnail image of your own to the post.

You also need to consider that images will increase the loading time of the site. If you have a slow loading site, it is probably best not to add more images to the blog, or at least not before you started to optimize the blog code for speed.

What I could not figure out at first was how to use custom headers for each category. Headers in WordPress contain all the HTML head information, like meta tags and the page’s title, and often the site’s logo and main navigation.

Before I go into details I’d like to explain how to create custom category pages. This works similar to creating custom tag pages. You basically copy and rename the standard category.php file of WordPress, and name it category-name.php where name is the name of the category. A custom template for the Firefox category here at Ghacks would have the name category-firefox.php, one for the Operating Systems category category-operating-systems.php

You can then edit the code of each category page individually, for instance by adding category specific information or images to the category listing.

A big problem, from a search engine optimization perspective, is that it is not possible to define custom head information for each custom category page. Why is that a problem? Because you cannot define meta tags and description or the page title in WordPress. Sure, you can modify the category name to a suitable one to get the page title you want, but this one shows up everywhere on your blog where you reference the category, not only as the title (for instance in the category listing in the sidebar).

This was not an option after all. After some dabbling and searching I came up with the perfect solution to use custom headers for the categories here at Ghacks. It again means that you have to copy and rename files but the solution works nicely and has been tested extensively.

Copy the WordPress header.php file and rename it. You are free to name it anyway you want, I suggest to name it header-categoryname.php for easier identification.

You should now have two header files in the WordPress theme folder, in my case they are named header.php and header-firefox.php.

Modify header-firefox.php as you see fit, you can for instance add meta descriptions, modify the page title or add a custom header image to it.

All that’s left now is to link that custom header to the custom category file. Open the custom category file, in my case it is category-firefox.php.

You should see <?php get_header(); ?> at the very top. This command tells WordPress that it should load the default header. We now replace that command to make WordPress load the custom header file instead.

<?php
include(TEMPLATEPATH.'/header-firefox.php');
?>

You need to modify the header-firefox.php part with the name of your category page, but that’s the only change.

This command tells WordPress to load the custom header if that category page is opened by a visitor of the website. And that’s basically it. Now you need to repeat the process for all remaining categories that you would like to add a custom header to.

The very same principle works for tags and pages as well.

This can result in two problems for the webmaster. Problem one is indexation. It can happen that a tag page gets indexed instead of the actual post. There are plugins that can deal with that problem by adding canonical tags to those links so that the search engines know that the post page should be indexed with priority for the keyword and not the tags page.

The second problem is that the tag page can irritate search engine users as they only see excerpts and not a single article. This can look spammy to some and might have a negative impact on a visitor’s perception of the page and the website in general.

We have posted an option to create custom tag pages in WordPress back in April of last year and that method is still valid and working.

This method basically creates a new template file for each tag that the webmaster wants to customize. It can for instance be used to display an introduction to visitors so that they know what the page is about. This method allows the posting of media as well as text on the tag pages.

Posting those additional information can be beneficial to the search engine indexation of the tag page as well since it adds unique content to those pages.

The disadvantage of that method is that a new template file needs to be created for each tag that the webmaster wants to customize. This is impractical for websites with thousands of tags.

Another method was posted at the Likemind blog. This new method has been introduced in WordPress 2.8. It makes use of a new tag variable called description which can be added to the tag’s template so that it will be displayed on the tag pages of the website.

Some WordPress themes come without a tag.php file. If that is the case it needs to be created and modified to include the description. The easiest way to do so is to copy the index.php file and rename the copy to tag.php. The following code needs to be added before the loop in tag.php

<!–Start Code–>
<?php $tag_desc = tag_description(); ?>
<?php if($tag_desc) : ?>
<div class="tag-description">
<?php print $tag_desc ;?>
</div>
<?php endif; ?>
<!–End Code–>

Each tag page will from then on display the tag’s description if available. Tag descriptions can be edited in the Posts > Post Tags menu in the WordPress admin interface.

The benefit of this approach is that only one template needs to be created and that everything else can be handled from within the WordPress admin area. That tag description can also be used as the meta description. There are some disadvantages though as it is difficulty to add formatting and media to the description (if at all possible).

The bad news is that it might not work with all WordPress blogs and that the user who wants to exclude the categories needs to know their category ID. The first problem is easier to solve. Excluding categories from WordPress feeds works if the WordPress blog is not using the Feedburner feed redirection plugin or a comparable plugin. The feed redirection plugin redirects all feed requests (no matter if they are category specific or the full feed) to an RSS service like Feedburner. This prevents that users can create individual feeds based on categories, authors or tags. It also prevents the exclusion of categories in the feed.

Finding out the category IDs of a WordPress blog is the second obstacle. Most webmasters use pretty permalinks which do not display IDs on the website. The only way to find out without asking the website owner is trial and error. Is is possible to open categories with their IDs in WordPress even if the Pretty Permalinks option is enabled. To open a category with a category ID one would open the following url in a web browser:

http://www.ghacks.net/index.php?cat=23

This would open the Linux category here at Ghacks. This can be a very time consuming process as I have seen categories with five digits. So its probably best to ask the administrator about the category IDs. (Feel free to post additional solutions in the comments).

To exclude categories from RSS feeds in WordPress one would use the following syntax:

http://www.ghacks.net/feed/?cat=-23

This removes category 23 from the main feed of the website. It is possible to exclude multiple categories from the feed, simply append an & and another cat=-xx in the end:

http://www.ghacks.net/feed/?cat=-23&cat=-9592

This excludes the Linux and Mac categories from the RSS feed.

Advanced tips are not that easy to come by and most websites running a WordPress blog do not have them implemented. This article will list some options that center around the nofollow tag. Nofollow basically tells search engines like Google to not count the link vote that is usually being passed when linking on the Internet. Why is that beneficial? A website has a certain linking power. Each link that is pointing to internal and external resources gets a piece of that linking power. Not all pages should be treated equally however which is what this article is about. It makes for example no sense to pass linking power to internal pages that you do not want to link for, think of privacy policies, contact pages, login, log off or social bookmarking links.

WordPress themes come with a surprising amount of links, the majority of which is not set to nofollow. Here are a few areas where you should consider placing the nofollow link tag in a WordPress blog:

• The more (read more) tag. The page is already linked from the title of the post properly.
• WordPress meta data
• Pages like Privacy Policies, Contact Us
• Social Bookmarking links

To add the nofollow link one would simply add the rel="nofollow"
tag to the link structure which is not a problem if the link is displayed in the source code of the theme, for example:

<a href="http://www.example.com/" rel="nofollow">Example Link</a>

There are however links (like the previously mentioned more tag) that cannot be manipulated in the theme source as the link is created by a php function.

Here is how you make the more tag in WordPress nofollow:

• Open the file post-template.php in the wp-includes folder.
• Locate the following line beginning with:

  $output .= ‘ <a href="’. get_permalink()..

• Replace it with:

  $output .= ‘ <a href="’. get_permalink() . "#more-$id\" class=\"more-link\" rel=\"nofollow\">$more_link_text</a>";

• You basically add the rel=\"nofollow\" tag to the line

This ensures that all more tags will be nofollow from then on.

Webmasters can however utilize tag pages better in their WordPress blogs by creating so called custom tag pages which can contain any information they want. If you open the page above you notice that it does not contain a listing of blog excerpts but a custom page for that tag.

WordPress provides the means to create those custom tag pages easily. Custom tag pages can be created in the theme directory of the WordPress directory by adding a new template file to the theme. This new template file needs to begin with tag followed by the post slug of the tag. In the case of the Windows 7 Download tag it would have to be named tag-windows-7-download.php.

Custom tag pages have a higher priority than the default ones that show only excerpts of the posts. The easiest way to fill the custom tag with content is the following:

WordPress looks for the following files in order to create those tag pages:

• tag-slug.php
• tag.php
• archive.php
• index.php

Look into your theme folder and see if there is a tag.php file. If it is copy its contents and create a new php file that is using the tag-slug.php as its name. If ther eis no tag.php look for archive.php and finally index.php.

Now simply add content to the file. It might take some experimentation at the beginning but it can be really worth it in the long run. If you have any questions or additions let me know in the comments.

Another thing that is really annoying in WordPress 2.7 is the fact that you can either delete all comments on the page, selected comments or all spam comments at once. At 20 spam comments per page and thousands in total this can take a long time to flip through and delete.

The WordPress hack is actually quite easy to perform even for webmasters who have no knowledge whatsoever regarding html and php. The file that is responsible for the amount of comments that are displayed is called edit-comments.php. It can be found in the wp-admin folder. Make sure you backup that file before you apply the changes so that you can revert back if something should go wrong.

Locate the following line in the file, it should be around line 182 in the file:

$comments_per_page = apply_filters('comments_per_page', 20, $comment_status);

The only thing that you need to do is to change the figure 20 to another figure, e.g. 100 so that it looks like this:

$comments_per_page = apply_filters('comments_per_page', 100, $comment_status);

Just save the file again and check the display of the comments in the admin interface to make sure everything is working correctly.