WordPress can be very simple to work with, but it can also be very complicated. The system can be used to do just about anything you like.

In this post we have collected together a range of tutorials that span from the very first things you need to know, like working with the loop, to much more complicated tricks, like setting up post thumbnails on your home page.

The 30 Tutorials

WordPress Tutorial: Customizing Widgets Using CSS

 Get Posts Published Between 2 Particular Dates 

 Multiple Wordpress Page Layouts in One Single Template

 The WordPress Help Sheet

 Wordpress Hack/Tutorial: creating a “dynamic sticky”

 Build a Basic Newspaper style layout with Wordpress and jQuery

 So you want to create WordPress themes huh?

 Client Friendly WordPress Themes: Header.php

 How to edit Wordpress themes using Dreamweaver

 Dissection of a WordPress theme

 Personalise your WordPress Weblog

 Wordpress tutorial: Blog posts in different columns

 How to : Make a control panel for your wordpress theme

 How to Protect CSS Mods for ANY WordPress Theme

 Web Design Wordpress Template Tag Reference Guide

 Things you should know when displaying pages in Wordpress

 Widgetizing Themes

 The Ultimate Guide to the WordPress Loop

 Don’t Ignore Your WordPress Footer

 Mastering Your WordPress Theme Hacks and Techniques

 How-To: Create a WordPress Theme in 5 minutes

 WordPress Category Page Hacks

 Developing a Wordpress Theme

 The WordPress Developer Toolkit

 Giving each WordPress post a thumbnail, and display the thumbnail on the home page

 Turning a web template into a WordPress theme: a video tutorial

 Adding Thumbnails to your posts in Wordpress

 Most Desired WordPress Hacks: 11 Common Requests and Fixes

 How to Make a Featured Post Carousel for WordPress

 Styling Individual Posts Using the_ID

Did you find any of these tutorials helpful? Let us know if you have any links to other great WordPress guides that you’d like to share!

iProduct is a premium WordPress theme from PremiumThemes.Net. It is aimed at site’s selling a digital product, though it does include a full blog design as well.

In this post we are going to take a look at the ups and downs of the theme to see what we can learn from it. To start, open up the demo page in a new tab to have a look at it for yourself.

NB – Full disclosure: This is a sponsored review, however there are no affiliate links, so it’s of no benefit to me to try talking you into purchasing the theme.

What Has Been Done Well?

The homepage layout devotes the majority of the space to highlighting just one product, the focus of your site. The large viewing area gives more than enough room for the product to be shown off.

This works great for instantly grabbing the user and sending them to your best-selling (or only!) product.

Page titles are a core part of the design. The page titles (shown above) are set on a dark black background, making them extremely noticeable. But the background doesn’t feel like it is there to highlight the title, it feels like it is simply a part of the design.

The large, easy-to-read font is helpful for a user in quickly gauging what page they are on, but the integration of the black stripe and the overall design stops the header from becoming overwhelming. It has been done perfectly.

Sidebar design. The sidebars are the real highlight of iProduct. The whole design of the site is very minimal and unobtrusive.

A simple grey gradient with some nice typography is all that was needed here for a great effect. They look as clean as the rest of the site, but sleek and modern for the user.

On top of that, the page that the user is currently on is highlighted in the sidebar (And in the header navigation too), which helps prevent users from getting lost.

On the blog page, the dates for recent posts are shown in relative terms. Instead of listing the date the post was written, it will instead show how long it has been since then.

For older posts, the format reverts back to listing the date.

What Could be Changed?

The sidebar navigation features sub-pages and it shows them nested under their parents (As can be seen in the sidebar screenshot above). This work perfectly and displays the entire navigation for a user.

However, with the head navigation, the sub-pages are left out. The top navigation bar looks great, but a rollover/dropdown menu to show subpages would be a great addition.

The image above shown the complete color scheme of iProduct, taken from the stylesheet. The various tones of grey (Not sure where the orange was used) have been used effectively to create a very minimal, sleek design.

However, with the grey page background in particular, the site can look quite dull. There is no doubt that the current color scheme does look good and will work well for many products, but it won’t be ideal for everyone.

It would be great to see some other varieties being offered, with brighter, livelier color schemes.

The final thing I would like to see changed is that there is no clear “Buy It Now” button anywhere on the site. There are links to all sorts of information about the product, but you have to go to the Pricing page and then click a “Buy It Now” button which blends too well into the design.

Something like Woot’s big, yellow “I want one!” button is the perfect call-to-action to convert readers into customers.

Conclusion

iProduct is a beautifully minimal theme that uses simple, tidy effects to shift all attention from the sleek design to your product. That is the only thing you need your design to do on a product site, and iProduct accomplishes that perfectly.

The dark color scheme won’t suit everyone, but it wouldn’t cost much to hire a developer to adjust the color scheme to something more suiting to your product.

If iProduct looks like the theme for you, you can purchase it here for $70. We have only looked at the aesthetics of the theme here, iProduct also comes with a very comprehensive control panel for managing every aspect of your theme. Check out the site to see more.

Well, that’s my thoughts. Now it’s your turn, how does iProduct look to you?

Web design is complicated. There’s a heck of a lot to learn. Typography, usability, color theory, the list goes on…

When you’re starting out, it can all seem overwhelming and even when you’ve been round the block a time or two, there’s still lots to learn.

We have collected together 26 full tutorials from the web that take you through the process of designing a blog, from scratch.

If it’s time for you to learn a new style of design, working through a complete project in one of the guides below is the best way to start. These posts take you step by step so even if your Photoshop skills aren’t the best yet, you won’t be left behind!

Making the ‘Clean Grunge’ Blog Design

Create Dark WordPress Theme

Tutorial RocknRolla Blog Design

Create a Nature Inspired Painted Background in Photoshop

Dark WordPress Theme Design

How I Learned To Build WordPress Themes

GreenPress WordPress Theme Design

Designing for WordPress: Complete Series & Downloads

 
WordPress Theme Web Design

Watercolored Design Studio Blog Layout

The Ultimate Grunge Design Tutorial

How to Create a Sleek and Textured Web Layout in Photoshop

Premium WordPress Theme Design Part 1 - The Photoshop Mock Up

MyBlues WordPress Style Layout

Building Custom WordPress Theme

Premium WordPress Design

Create a Magic Night Themed Web Design from Scratch in Photoshop

Create a WordPress Theme

Winter WordPress theme
 

Creating a WordPress Theme

Design a WordPress Mockup Theme

How To Create WordPress Themes From Scratch

Chocolate Pro WordPress Style Layout

WordPress Theme Design in Photoshop

How to Create a Grunge Web Design in Photoshop

How to Create a WordPress Theme from Scratch

Do you know of any other tutorials for creating a complete blog design? Let us know if you have any luck with any of these!

A “Theme Options” page is designed to give control over how a theme looks and functions, solely by setting options in the WordPress dashboard. The user then has no need to edit the core theme files.

Theme Options have become a standard feature in premium WordPress themes (And some free ones too!), and aren’t that complicated to set up.

This post is a roundup of how Theme Options have progressed so far showing you what the advantages are, some resources for creating your own, and a collection of premium themes offering options pages so you can see what’s out there.

And at the end of the post, there’s a competition to win a free PSD to WordPress coding, with a theme options page included! Courtesy of Design to WP, thanks guys!

Advantages of Theme Options

The advantages are quite simple:

• No technical knowledge required – Users can swap between 2 and 3 columns without understanding a single line of HTML or CSS.
• Theme upgrades possible – The theme files are not edited by the user, so the theme can then be upgraded with new features later without losing any of the customizations made by the user (As they are stored in the database).
• User-friendly – Even for users who know their way around a theme, the ease-of-use of just flicking a switch in an options page is far more appealing than editing source code.
• For theme sellers only: Competitive advantage – In terms of premium themes, an options page is now required. Users expect them and your competitors have them, so you can’t not.

Creating Your Own Theme Options Page

Alex Denning from Nometech has put together a series of very detailed posts walking you through creating an options page for a theme. Check them out here:

• Create an Awesome WordPress Theme Options Page (Part 1)
• Part 2 – Implementation

In Part 3, he shares some screenshots of options pages in free WordPress themes.

Over on WeFunction, there is a great guide to adding options to the Write Post page.

Theme Forest have also put together a tutorial for creating an options page.

Lastly, if you’re stuck for ideas on what to put into your page, Blogsessive have looked around and listed what they found were the most popular features in a theme’s options.

Options Pages from Premium Themes

A lot of themes don’t have screenshots of their Options pages, but this is a collection of the ones I could find. It should help give you some ideas for what you could do with your next theme, or even what options are out there as a customer!

NB – No affiliate links here, it’s just for inspiration. And no company has been listed more than once.

Groovy by NattyWP

Suit and Tie by WooThemes

Arthemia by Color Labs Project

Studio Blue by Elegant Themes

WP Unlimited also seems to have a great set of options, but I couldn’t find any decent screenshots for it. Still worth a look though!

Videos of Theme Options in Use

Press75 have a video of the options page on their “Massive News” theme here.

Thesis have videos of their options page, design options and in-post options.

Win a Free PSD to WordPress Coding, with Theme Options!

Design to WordPress are offering one reader here a free PSD to WordPress conversion, with their control panel included.

To be in with a chance to win, just reply to this post with a comment answering the following question:

What feature would you like most in a theme options page?

I’ll pick a random winner from everyone who enters in 10 days time!

Good luck to everyone who enters!

Today you will learn 10 ways to install accordion menus in your Worpress theme!

This will help to organize your blog, make your site look more professional, and possibly save you some precious real estate in your layout. Real estate on a blog is as important as it is in the real world (especially in congested areas), you need to make the most out of your space as you can.

Accordion menus get their name from the instrument of the same name. Much like the bellows going in and out as someone plays music on an accordion, an accordion menu expands and contracts from user interaction, one section at a time.

This way top level names are listed at all times, but sub-categories and child items are only exposed as each section is expanded. Your visitors only see what they need to at any given time.

Accordion menus are used in blog navigation, and of course everyone's blog is different, so your navigation might be in the header, sidebar(s), footer, or any combination thereof. I will show you many different examples because you could use them for pages, posts, categories, images, and more.

You will also see different ways to implement them, from plugins, to theme hacks, or by using special libraries. Hopefully you'll have a 'lightbulb' moment and one will catch your eye!

1. Super Slider Wordpress Plugin

SuperSlider is a Wordpress plugin "suite" that does many things, including slideshows, image reflections, and image zooming capability. It's accordion capabilities are what we're interested in, so we'll look at that section of the plugin suite (which runs on Mootools).

SuperSlider Accordion Navigation Menu: SuperSlider also allows you to create an accordion menu for navigation in your sidebar, like the one on their own web site. You have the ability to organize both your categories and your posts in a single navigation element with this plugin - which I believe is much more intuitive than the Wordpress default of a list of categories and a list of recent posts. You can even add counts and RSS links to the menu. The are very customizable through the admin interface, theme based, and the animations are CSS.

Here's the very detailed example from the superslider web site:

Visit the SuperSlider home page

2. BySlideMenu Accordion Menu

Accordion menus don't have to be vertical, they can be horizontal as well. This is a great image based slider (based on Mootools) that can easily be integrated into the header of your wordpress theme by merely pasting a few lines of code and uploading a few files.

You will have to create your own cool images for the slider, and these navigation elements will be hardcoded and not dynamic...meaning as you add or remove major sections of your site over time you'll have to manually modify your slider and links.

It does require more work than a plugin to configure, but I use this on one of my sites and everyone just loves it!

Here's an image example of the BySlideMenu in action:

Visit the BySlideMenu home page

3. Accordion Image Menu Plugin

This plugin takes the last example and puts it on it's side - literally! It's a wordpress plugin that allows you to create an vertical image based menu. Here's an example:

The picture doesn't do it justice, you'll have to check out the demo on the plugin homepage. Basically your elements have an image for background, and on mouseover each one expands to reveal the fuller picture for an awesome effect.

It's got some great features for different applications too, like the ability to combine pages and categories in any order, recent post listing, and whether or not to include the textual title.

Visit the Accordion Image Menu home page

4. Post History Manager Plugin

Post History Manager is an oddly named plugin, but it does work great. It's named post history manager because it's a sidebar widget that manages 4 different kinds of "post history"; posts, comments, categories, and archives.

It's simple, but it does work great. At first just the 4 headings are shown, but just click on any one for more and it will automatically expand "accordion" style vertically. Click on another, and the first one will contract and the next selection expand as in this example image:

Visit the Post History Manager home page

5. Sliding Notes Plugins

Another interesting accordion use is the "sliding notes" plugin. Basically it allows you to add a hidden element to your post, a footnote, translation, code, an aside, bio info, etc. -and then it slides out to be revealed (or slides back if you click it again).

By using shortcodes, you can add these sliding notes anywhere in the post content at all, I believe even multiple instances. It's also very, very easy to customize the style of these with CSS.

Here's an example of sliding notes in use to hide a simple translation after a post:

Visit the Sliding Notes home page

6. Accordion View Widget

Maybe you've seen all these examples and none so far tickled your fancy. That's ok, because there's code of course to do just about anything you want. Yahoo has long since had an entire library of effects that anyone can use in their web site code for free, and the Accordion View Widget is no exception.

This widget is the end-all-be-all of configuration options because it can be any size, and contain any content, and styled nearly any way. It won't, of course, hook into any Wordpress functions unless you do a little hacking and set it up that way - but the possibilities are endless.

Here's an example image:

Visit the Accordion View Widget home page

7. Flexible Sliding Menus

Flexible Sliding Menus allows you to place your links, posts, and categories, in an accordion style menu - but this one has a twist because instead of being built on libraries like MooTools or jQuery, it's built on Flash!

Add a simple call in your sidebar, upload the plugin and swf file, enable it, configure your options and you're done!

Here's an example image:

Visit the Flexible Sliding Menus home page

8. Tabbed Widgets

Tabbed widgets is another ill-named plugin because it doesn't completely describe what it does. It's a widget that's capable of producing either a tabbed or accordion style widget.

You could actually configure multiple instances of the widget, and have several accordion style, one accordion, one tabbed, etc.

Here's an example of the accordion style widget:

I wanted to also show you how easy the configuration on this one was as well:

Visit the Tabbed Widgets home page

9. Advanced Spoiler

Much like the Sliding Notes earlier, Advanced Spoiler allows you to hide some content and and click to "expand" it into view.

The name of the plugin indicates that you can use it to hide a spoiler for a story, but it could also be used to hide just about anything, such as footnotes, bio, additional info, etc. You can add content, images, or both. This example shows the 'spoiler' already expanded.

Visit the Advanced Spoiler home page

10. Slidoox Horizontal Accordion Slider

Slidoox is a very interesting slider based on Mootools that has some very cool effects. You can change the size, color, and background with the stylesheet.

It's very difficult to describe how this one works, basically in setup you define a rectangle box, such as the size of your content area or header. At the top of the box are the names of content that you define. Unlike other menus when you click on an item at the top of the box, the items "slide" in from left or right - and that content can be text, images, or a combination.

This could definitely be used for featured content, and more! I won't even attempt to give you an image for this one - I strongly suggest you view the live demo: click to view the Slidoox accordion slider demo

Visit the Slidoox plugin home page

Conclusion

I hope you learned more ways to add accordion menus today than you can shake a stick at. The ways to customize your theme are just about limitless, but accordion menus are a great place to start!

Let us know if you've used on accordion menus on your blog, and what script you used to get them!

Ever wanted to browse through the older post archives only to be staring at the screen for ages in frustration while the content slowly loads up? A quick fix would be to make use of AJAX to load the post archives. In this tutorial, I will show you how to do that using the ever popular JavaScript framework; MooTools on a typical 2 column WordPress theme.

The code is quite easily digestible and with a little CSS tweaking, you could get it to work for your theme.

Step 1: Readying the Files

Download the file mootools_core.js and upload it into a folder within the directory of your active WordPress theme and name it as js.

I only included components needed for AJAX post pagination in this MooTools build. You are however welcome to create a new one with components you would like to use.

Create a blank JavaScript file called ajax.js and upload into the js folder. At this point of time, you should have these 2 files in your js folder.

yoursite.com/wp-content/themes/yourtheme/js/mootools_core.js
yoursite.com/wp-content/themes/yourtheme/js/ajax.js

Step 2: Edit header.php

You have to tell the browser that we have a JavaScript file to use. Add the following lines into your header.php just before the closing </head> tag.

<?php wp_enqueue_script('mootools', '/wp-content/themes/yourtheme/js/mootools_core.js')); ?>
<?php wp_enqueue_script('mootools_ajax', '/wp-content/themes/yourtheme/js/ajax.js')); ?>

Where yourtheme is the folder name of your active theme.

Step 3: Edit index.php

When it comes to AJAX pagination, we only want to refresh the post listings and not other portions of your site. The following code snippets will tell the browser to skip loading the entire page.

The top of your index.php file should have the following line:

1

<?php get_header(); ?>

Replace that line with this:

1
2
3

<?php if (!isset($_GET['ajax'])) { ?>
<?php get_header(); ?>
<?php } ?>

Similarly, at the very end of the file you should see:

1
2

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Now replace it with this:

1
2
3
4

<?php if (!isset($_GET['ajax'])) { ?>
<?php get_sidebar(); ?>	
<?php get_footer(); ?>    	
<?php } ?>

To avoid any possible causes for the code not to work, do ensure that your HTML structure is identical to the ones listed below. We will need to have a div with an id of 'post' nesting the loop.

Go back into index.php and add the div before the start of the loop, i.e. the end result should look like this:

1
2

<div id="post">	
<?php if (have_posts()) { ?>

Be sure to also close the <div> after the loop ends.

1
2

<?php } ?>
</div>

We also need a div with a CSS class of 'page-navi' to nest the post pagination links.

1
2
3
4

<div class="page-navi">
	<?php next_posts_link('- Older Posts -') ?>
	<?php previous_posts_link('- Newer Posts -') ?>
</div>

Step 4: Writing your ajax.js

This is basically what goes on in your JavaScript file. I have left some pretty detailed comments so that you know what the code is all about.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//function used to handle AJAX post pagination
function ajaxLinks(id, container) {
 
	//looks for all instances of id
	$$(id).each(function(ele) {		
 
		//what happens when the particular instance is clicked on
		ele.addEvent('click', function(e) {
			e = new Event(e).stop();
			var alink = ele.getProperty('href'); 
			var url = alink;
 
			//construct the new URL with a parameter indicating how it should load the page (fully or a portion of it)
			if (alink.indexOf('?') != -1) {
				url += "&ajax=y";
			} else {
				url += "?ajax=y";
			}				
 
			//this is where the magic happens
			var ajaxLink = new Request.HTML({				
				onRequest: function() {}, //what happens during an ajax request is made													
				onSuccess: function() { //what happens when an ajax request is completed successfully															
					new Fx.Scroll(document.body, {'duration': 'long'}).start(0, 0); //scrolls to the top of the page once your content is loaded
					ajaxLinks('.page-navi a', 'post'); //calls the function again so that it will add ajax post pagination to your newly loaded page
				}, 
 
				onFailure: function() {}, //what happens when an ajax request fails
				update: $(container) //#post which is your container gets updated
			}).get(url);											
		});		    
 
	});
 
}
 
//needed for the MooTools build to be executed
window.addEvent('domready', function(dom){						 
	ajaxLinks('.page-navi a', 'post'); //Of course all of this will not be completed until you call the function to action
});

Step 5: Customization

As you would have probably guessed, this is a very basic implementation of how AJAX post pagination works in WordPress themes.

I would love to let your imagination run wild and see what you come up. Of course you need to have a little knowledge in CSS to get it done. Customizations can be made in the 3 different events (onRequest, onSuccess and onFailure).

If you have any doubts or feedback about this how-to. I would love to hear of it.

Back in December I swapped from using the regular WordPress search to using Google Custom Search. The change was very easy to make and Diogo Iglésias wrote up an easy tutorial for it here.

The reason for the change was simple; Google is a great search engine. I realized that every time I wanted to search my own site, I was going to Google and typing in “site:problogdesign.com” and then searching there. If I don’t want to use my own site search, who does?

The Test – Number of Searches

If one type of search encourages more people to search, then it’s doing a better job.

Google automatically tracks stats on your search engines (Go to google.com/cse > Manage Existing Search Engines > Statistics). To track WordPress’ search, I used the excelled Search Meter plugin from Bennett McElwee.

One thing to note first is that the search box on this design is very unobtrusive and hard to spot (Purposefully, I have other content that’s more important), so the number of searches is very low. It makes the results less reliable statistically, but as you’ll see, there’s a clear trend regardless.

WordPress Search:

• August – 102
• September – 92
• October – 82
• November – 109

Google Custom Search:

• January – 131
• February – 140
• March – 136
• April – 142
• May – 131

The average number of searches for WordPress was 96, and for Google 136. That is 40 extra searches per month just because people saw the Google logo. It doesn’t sound like much there, but on these small numbers, that’s a 42% increase over the WordPress average.

Reasons To Stick With WordPress

You would need to do a lot more testing with more sites and more users, but even so, the numbers above are quite damning for WordPress. For that reason I’m going to list a few of the reasons to stick with WordPress search:

• No adverts - Google plaster your results page in adverts. Have a look at it on my site, it’s over the top.

• Control over the layout – By creating a search.php file in your theme, you can lay out your results in any way you like. You can create a bullet list of results, show thumbnails, give excerpts, or anything else you like.
• Special Effects – Things like highlighting the search terms, pagination, dynamic search text and any other trick you can think of are possible on WordPress because you really do have complete control.

Conclusion

In conclusion, I would love to take advantage of the design of my search page with all the power of WordPress. However, the quality of the results comes first and foremost and for the minute at least, WordPress search just doesn’t cut it.

Someday that will change though, and when it does, I’ll swap right back.

What about you? Have you considered leaving WordPress search for a different system?

If your site takes an age to load, in the words of Jeremy Clarkson, that's not good. You don't want to wear on your reader's patience before they've even started reading.

In this post we'll explore ten ways to speed up your site, with tricks ranging from easy to even easier; none of the stuff in this post is difficult, so there's no excuse for a slow-loading blog after reading this!

1. Delete Any Unwanted Plugins

If your site is loading slowly, look at how many plugins you're using. If the answer is more than ten, look at the plugins you're using and ask yourself whether you can integrate them directly into your theme.

While you're at it, also ask yourself whether you really need the plugin. If you can do without it, do.

2. Remove Unnecessary PHP Tags

If you're using a theme that you didn't make yourself, then chances are it's full of php that doesn't need to be there. For example, your header could have something like this:

This is telling WordPress to get the stylesheet url every single time someone loads your page. You can very easily replace this with something like this: (Remember to replace yoursite.com with your address).

This is just one example - there are many many more times you can do this - have a hunt round your header.php and other theme files and you'll be amazed at the number of unnecessary queries you can eliminate. We have a list of 13 of the most common un-needed tags here.

3. Use WP Super Cache

One of the better known techniques for speeding up WordPress is to install the WP Super Cache plugin. It caches your site for super-quick loading. It's as simple as that. Install it and forget about it (and then promptly remember it when you wonder why your design changes aren't showing next time you edit your theme files!).

4. Optimise Your Database

You'd be surprised how much you can increase your load time simply by optimising your database. As always, you could do it manually or just get a plugin that does it for you!

The manual way. This is super easy, as I explained on my blog: login to cPanel, find phpMyAdmin, select your database, click 'check all' at the bottom of the page and then in the drop down box in the middle of the page (see the image below), select 'Optimize database'. And you're done.

The other option is to use a plugin: the Optimize DB plugin from yoast.com does what it says on the box.

5. Optimise Your Images

If images aren't optimised, both your blog's bandwidth and load time will be affected. Both are bad. The solution? Optimise your images. It's easier than you may think; in Photoshop click 'save for web' under the file menu or in the free GIMP, save the file as a .jpg and you'll automatically be given the option to compress your image.

As a benchmark, although obviously depending on what the image is, on my blog I aim for in-post images to be 40kb or less (although don't sacrifice quality too much!).

If for whatever reason you can't use an image editor, all is not lost! Yahoo have a free service called smush.it that you can point at a web page and it'll optimise the images.

6. Compress your CSS and JavaScript

Again, something that is very easy to do: compress your CSS and put your JavaScript into a single file.

To compress your CSS, you can use an online tool, such as styleneat.com (see the image below), which will get rid of the white spacing and neaten everything up. You might not notice any difference to start off with , but it will make a difference to your blog's load speed; these things all add up.

Something else do is to put all of your JavaScript into a single file and then load it at the bottom of the page (in the footer.php file). This ensures that the styling is loaded first, then any fancy JavaScript you've got loads last.

7. Disable Hotlinking

As I said earlier, if your images aren't optimised then your using up bandwidth unnecessarily. It's bad enough having to keep images optimised for your own server's sake, but say someone else copied and pasted the url of the image, putting your images on their site?!

That's called hotlinking, and via the .htaccess file (which you'll find in your root directory), disabling hotlinking is easy.

First, backup your .htaccess file. I can't stress how important that is! Next, add the lines of code below, changing the appropriate lines to suit your blog. The last line is an image that will display instead - how about an advert for your site?

1.#disable hotlinking of images with forbidden or custom image option
2.RewriteEngine on
3.RewriteCond %{HTTP_REFERER} !^$
4.RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC]
5.#RewriteRule \.(gif|jpg)$ - [F]
6.RewriteRule \.(gif|jpg)$ http://www.yourdomain.com/stealingisbad.gif [R,L]

Source - A to Z of WordPress .htaccess hacks.

8. Keep Spammers Away

The .htaccess file is a very useful tool (e.g. here's some of the best htaccess tricks); it won't just stop hotlinking, but it can also be used to keep spammers away by blocking referrers from certain sites. At this point, you're probably thinking "great, pity it'd be impractical to implement this.''

Well, yes, it would be. The good news is that over at Perishable Press, Jeff has complied a list of over 8000 of the web's spammiest referrers, which you can download here and just copy and paste into your .htaccess file.

How will this help your site load faster? If spammers aren't getting onto your site then they aren't using up your resources, freeing them up for everyone else to use, so the site loads faster. It will stop spammers from baraging your server with hundreds of requests. You can read the full explanation on the post at Perishable Press.

9. Turn Off Post Revisions

Post revisions, introduced in WordPress 2.6, haven't been a big hit with everyone, especially those with single-author blogs. Why do they slow down your site?

Every single time you save a post, a new row is created in your wp_posts table, so if you save your post ten times, that's ten new rows created.

Thankfully, as Lester Chan points out, it's easy to turn off post revisions - add the following line to your wp-config.php file:

10. Your Thoughts and Additional Reading

A couple of other articles around the net to check out -

AndBreak.com: Guide to Speeding Up WordPress

WPCandy: 4 Simple Ways To Speed Up WordPress

Lorelle on WordPress: The 3 Easiest Ways to Speed Up WordPress

Yoast.com: Speed up WordPress, and clean it up too!Speed up Wordpress, Increase Wordpress Performance

Noupe.com: 13 Great WordPress Speed Tips and Tricks for MAX Performance

Everyone's got their own ideas: what's your favourite way to speed up WordPress? Leave a comment below.

There are a few essential steps that need to be taken with any new wordpress install. Obviously not every wordpress blog will be the same but there are some basics that I feel should be done regardless of what kind of blog you're creating.

Here we'll go through 10 steps that are essential to preform after any wordpress install including a list of 10 plug-ins that are a must for blogs of any type.

Step 1 - Change Permalink Structure

When you go to Settings > Permalinks, you'll notice that the default permalink is http://site.com/?p=123. This structure not only isn't a good idea for SEO but it also doesn't tell your visitors anything about the link they're visiting.

I would suggest a custom structure here using only the post title (http://site.com/title-of-article) which will provide some keywords for search engines as well as giving your readers something to go on.

Some people choose to add in the category (http://site.com/category/title-of-article) however, if you want to assign multiple categories to a single post, you will have to work out a way to deal with duplicate links.

To change your permalink structure choose Custom Structure and paste /%postname% in the box. If you want to add the category as well paste in /%category%/%postname%

Step 2 - Set up Authors

Since we want to remove the admin account in the next step for security reasons, it's time to set up the authors of our blog. To do this go to Users > Add New and fill out the form. Be sure to make yourself an administrator, you will then want to set up any other authors that will be writing for your blog assigning them to whatever role and permissions you want them to have.

Step 3 - Fix Security Issues

There are a few minor security issues that need to be dealt with on a new wordpress install. While these aren't major risks, it's good to have every security measure possible in place to keep your blog safe. The last thing you want after taking the time and energy to put your blog together and get it up, is for it to be brought down through an exposed security point that could have easily been avoided.

Disable Remote Publishing: Unless you use an external blog editor I would recommend disabling both Atom and SML-PRC publishing. These settings are under Settings > Writing.

Remove The Admin Account: You'll want to delete the default admin account that is automatically created when you install wordpress. Hackers know that this account is automatically added by default and is automatically assigned ID#1 making it an easy starting point for them. To do this go to Users, mouse over the admin account and click Delete.

Disable Post Via Email: These settings are also under Settings > Writing. If you don't plan on posting via email, don't put any real information in this section.

Create a blank index.html file to hide directories: Put this file in every directory you don't want people to be able to browse. That way if someone loads a directory, they will just be shown a blank white page instead of the contents of the directory.

Alternatively, you can use htaccess to prevent people browsing your directories if you're confident editing it.

Step 4 - Set up Discussion Settings

In this section we'll be focusing specifically on the areas shown in the image below. First navigate to Settings > Discussion

There are a number of areas under the Settings section and most of them are either very intuitive like the General Settings or will just be left on the default settings. However, the Discussions area has some important options that you will set according to your own personal preferences. Let's take a look at each of these options and what each mean.

• Attempt to notify any blogs linked to from the article - This will notify any other wordpress blogs that you link to in an article with a pingback. I recommend you have this checked since pingbacks can send some pretty decent traffic to your blog.
• Allow link notifications from other blogs (pingbacks and trackbacks.) - This notifies you if any other wordpress blogs link to you and adds a pingback/trackback to the comments of the article that was linked to. I also recommend you have this checked for the same reason.
• Allow people to post comments on the article - This one is totally a personal preference. If you want to allow comments on your blog check it, if not leave it blank. My personal opinion on this is that comments are a large part of what makes blogs great, however, I know of some great blogs that have comments disabled because the author doesn't have time to keep up with them.
• Comment author must fill out name and e-mail - I recommend having this checked to reduce the amount of spam you get in your comments.
• Users must be registered and logged in to comment - If you have a site where users can register you would probably want this checked to further reduce spam. However, if, like most blogs, you don't offer registration or don't want to require readers to register to comments, leave it unchecked.
• Automatically close comments on articles older than -- days - Some bloggers choose to close comments for older posts so that they don't have to keep constantly going back to check for new comments and reply to them. If you want to implement this strategy check this option and set it to the number of days you prefer to leave the commenting open.
• Enable threaded (nested) comments -- levels deep - Threaded comments are a new feature in Wordpress that I haven't had a chance to thoroughly explore. If you want to use nested comments, first you need to make sure your theme supports them, then check this box and set the number to the maximum you want shown on your blog. Any more than the number shown will be hidden and the reader will be given the option to view them.
• Break comments into pages with -- comments per page and the -- page displayed by default. Comments should be displayed with the -- comments at the top of each page - If you have a very active blog and get a lot of comments you will probably want to check this option. Using the default settings, if a post has more than 50 comments, they will be split up on multiple pages with the last page displayed and older comments at the top of each page.
• Email me whenever - Anyone posts a comment - If you would like to get an email every time someone posts a comment on your blog, check this option. If you have a high traffic blog, you may not want to do this to keep your email down to a minimum.
• Email me whenever - A comment is held for moderation - If you would like to get an email whenever there is a comment awaiting moderation on your blog, check this option. I recommend checking this one since most people want to get comments moderated as soon as possible.
• Before a comment appears - An administrator must always approve the comment - If you want to have to approve every comment before it goes live, check this option. Some may choose to do this so that they can check for spam or inappropriate comments before they actually show up on the blog.
• Before a comment appears - Comment author must have a previously approved comment - This is the option I have chosen on Arbenting. If the comment author has never replied on my blog before, I have to approve it before it goes live. However, if the comment author already has approved comments on the blog, their comments will post automatically.

Step 5 - Update Your Ping List

To update your ping list go to Settings > Writing and scroll down to Update Services. Make sure that, at the very least, Pingomatic (http://rpc.pingomatic.com/) is in your Update Services box. Other than that I would also recommend adding the following list along with any additional services you would like notified whenever you add new content to your blog.

http://api.moreover.com/RPC2
http://bblog.com/ping.php
http://blogsearch.google.com/ping/RPC2
http://ping.weblogalot.com/rpc.php
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://ping.bloggers.jp/rpc/
http://rpc.pingomatic.com/
http://rpc.weblogs.com/RPC2
http://rpc.technorati.com/rpc/ping
http://topicexchange.com/RPC2
http://www.blogpeople.net/servlet/weblogUpdates
http://xping.pubsub.com/ping

Step 6 - Set up Feedburner

Setting up your feed at Feedburner not only gives you more options than you would have with the default, but it also allows you to keep track of your statistics. Go to Feedburner and set up an account if you don't have one already. Then type in the address of your blog and hit next to set up a feedburner feed for your blog.

If you need help setting up your account or just want to learn more about Feedburner's options, Setting Up Feedburner to Syndicate Your RSS Feed is a really helpful screencast on doing just that.

Now anytime you link to your feed, make sure to use your new feedburner address. We'll finish the Feedburner process in step 10 with the Feedburner Feedsmith plugin.

Step 7 - Upload and Activate your Theme

Chances are you won't want to keep the default wordpress theme. If you're a professional blog you'll probably either want to have a custom theme made or purchase a premium theme.

If your blog is a personal or a hobby blog, you may want to try out one of the many free themes available. Whichever way you choose to go, you will have to upload and activate the theme.

First connect with your host via FTP and go to the folder where you have your blog installed. Go to wp-content > themes and upload your theme. Then, to activate the theme, go to Appearance and click on the theme you want to activate.

This will cause a pop-up window showing you a preview of the theme you are about to activate. Click Activate "Theme" and you are done.

Step 8 - Set up Analytics

Google Analytics is one of the best free statistic tracking services available. To set up your account go to Google Analytics and either log in with your Google account info or in the unlikely event you don't have one, sign up. Now you just need to add your website.

If you don't know anything about Analytics and need help setting up your account, How to Use Google Analytics for Beginners is a great tutorial for you.

NOTE: Don't worry about inserting the javascript into your pages yet, the Google Analytics Plug-in will take care of this for you.

Step 9 - Edit the About Page

By default there is a generic ‘about page’ already in your new wordpress install. However, you aren't going to want to leave this the way it is. Instead you want to personalize it and actually make it about you or your blog. To do this go to Pages, hover over About and click Edit.

I would recommend putting a bit about your blog, a bit of personal information and a photo of yourself if you feel comfortable. Blog readers like to know a little something about you, so adding this bit of a personal touch to your blog is essential, in making this connection.

Step 10 - Install and Activate the Following Plugins

Wordpress is a pretty impressive blogging platform on its own, but add plugins, and you have one of the most customizable blogs available. There are thousands of plugins to choose from that can do pretty much anything you can imagine. The plugins we are going to focus on here are those that I feel are essential to any wordpress installation.

To install these plugins you will need to go to the sites, download and unzip them. Then, via FTP, go to the folder where wordpress is installed and go to wp-content > plugins. Upload any plugins you want to install to this folder.

Alternatively, if you're using WordPress version 2.7 up you can go to Plugins > Add New in your dashboard and search for the plugin there. You can then click "Install" when you find the plugin and it will copy the files to your server for you automatically.

To activate the plugins you have just uploaded go to Plugins and click Activate for each plugin you want to activate. Any plugins with settings will now have it's own section under Settings.

Plugin 1 - Akismet

Akismet is one of the best spam filters available for wordpress and is one of the two plugins that comes pre-installed on your blog, so all you will need to do is activate it. Once activated, it will ask you for your Wordpress API Key. If you already have one for another site, you can use it here, individual keys can be used on multiple sites.

If you do not have a key, sign up for one at Wordpress API Keys. Once you have this go to Plugins > Akismet Configuration, enter your key and click Update Options.

Plugin 2 - Permalink Redirect

Search engines tend to hold it against your site if multiple URLs show up for identical pages. Permalink Redirect makes sure that there is only one URL for each blog entry.

While it is a good idea to install this plugin regardless, make sure to use it if you set your permalinks to blog.com/category/title_of_the_post.

Plugin 3 - All in one SEO Pack

All in one SEO Pack gives you options to optimize your wordpress blog for search engines that the basic wordpress install is missing. For the basic settings go to Settings > All In One SEO and fill in the Title, Description and Keywords for your blog. You will most likely leave the other options on this page set to their default.

The other half of this plugin comes into effect whenever you write a new blog post or page. When you are editing a post or page, if you scroll down to the bottom of the page, you will see a section for All In One SEO Pack where you can add the Title, Description and Keywords of each individual post and page, or disable the SEO altogether for them.

Plugin 4 - Wordpress Automatic Upgrade

While upgrading wordpress is not the hardest thing to do, it can be cumbersome and a waste of time that is unnecessary with the Wordpress Automatic Upgrade plugin. This plugin lets you know when a new version of wordpress is available and allows you to back up your files and upgrade with only the push of a few buttons.

Plugin 5 - Google Analytics for Wordpress

The Google Analytics for WordPress plugin automatically tracks and segments all outbound links from within posts, comment author links, links within comments, blogroll links and downloads. It also allows you to track AdSense clicks, add extra search engines, and track image search queries.

This is also where you will put in the javascript for Google Analytics keeping you from having to edit your theme. Go to Settings > Google Analytics and paste the legacy urchin.js script into the box.

NOTE: It is very important that you use the legacy urchin.js script and not the ga.js since this plugin will not work with the ga.js script.

Plugin 6 - WP Super Cache

WP Super Cache is probably not essential for a brand new blog, but since most people start a blog with the intention of it growing, this plugin may become more of an asset as this progress occurs. The plugin generates static html files from your dynamic WordPress blog. This allows for quicker page loading for your readers, as each additional time the page is accessed, the more compact and less memory intensive static page it has generated will load rather than the fully scripted WordPress one.

Plugin 7 - Google XML Sitemaps

Google XML Sitemaps will create a Google sitemaps compliant XML sitemap of your wordpress blog that you can submit to any search engine. While there are some settings you can change for this plugin, it pretty much just works on its own.

Plugin 8 - No Self Pings

Chances are you are going to want to reference and link to past relevant blog posts in your current ones. By default, when you do this, the post you link to will get a pingback from the new post. No Self Pings keeps wordpress from sending pingbacks from your blog to your blog.

Plugin 9 - Feedburner Feedsmith

Now we can complete the last step to getting your Feedburner feed set up. Install and activate the Feedburner Feedsmith plugin, then go to Settings > Feedburner. All you need to do here is put in the Feedburner feed address you set up in step 6 and click Save. The plugin will now detect all ways to access your feed and redirect them to your FeedBurner feed.

Plugin 10 - WP DB Backup

Always back up your data! The geek's mantra. This holds true for your wordpress databases as well. Imagine suddenly losing a years worth of blog posts and not having a back up. The thought brings tears to my eyes. WP DB Backup allows you to easily back up your wordpress databases.

Bonus: Delete The Hello Dolly Plugin - This is really an insignificant step but one that I always feel the need to take just to keep my folders as clean as possible. Hello Dolly is a useless plugin that puts random lyrics to hello dolly on your dashboard. It comes pre-installed and since I've never had any reason to activate it, I always delete it.

Wrap Up

So that's my must-do list, the routine I got through after every wordpress install. What are the essential steps you take with your new installs?

Tags have become a very popular way to browse sites online. You pick the keyword you’re after and get a set of posts specifically related to that topic. They’re ideal for bloggers for because one post can be tagged multiple times and it’s very easy to do.

Adding a tag cloud to your sidebar or footer is simple, but that only shows off a very small number of your tags. What if we could add a small link beside the tag cloud to a page with all your tags?

It’s extremely easy to do, as you’ll see below. The end result will be just like the Tag Archive page here.

1 – Set Up a Page Template

A Page Template in WordPress is a theme file that is used specifically for one Page. When a user loads that page, WordPress will use the Page Template to build the page, not the normal page.php file.

To start, open up your theme’s page.php file and re-save it as tag-archive.php (If you don’t have a page.php file, use index.php instead).

At the top of the file, paste the following code:

1
2
3

<?php /* 
Template Name: Tag Archive 
*/ ?>

2 – Edit Your Template into a Tag Archive

We are going to delete all of the normal content code. The exact code will vary depending on your theme, but it will be something like the follow (From the default theme).

The important lines to look for are the start and end lines. They will be the same in the majority of themes.

1
2
3
4
5
6
7
8
9

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="post" id="post-<?php the_ID(); ?>"> 
<h2><?php the_title(); ?></h2>
<div class="entry"> 
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div> 
</div> 
<?php endwhile; endif; ?>

Also, take note of the <h2>. You may find that it is a <h1> in your theme.

Now, delete all of that code we just found.

In its place, paste the following:

1
2

<h2>Tag Archive</h2>
<p id="page-tag-archive"><?php wp_tag_cloud('number=200&unit=px&smallest=8&largest=32'); ?></p>

The first line gives the page title. Feel free to edit it, and also change the <h2></h2> to <h1></h1> if that is how it was in the code we deleted.

The second line uses the wp_tag_cloud template tag to generate the cloud. We have set it to display the 200 most popular tags, though you can change that to more if you like.

The smallest and largest values refer to the size of the links (In pixels, as set by the unit value). Because we are displaying so many tags in one place, it is helpful to have a very large size range here. 8px is small to be displaying anything but given the wall of text you are putting on the page, it can be helpful from preventing it getting overwhelming.

And we have wrapped the whole thing in a paragraph which will apply your theme’s normal content styles to it, but you can use the ID page-tag-archive to style it however you like.

3 – Create a New Page in WordPress

Upload the tag-archive.php file to your theme folder, then go to Pages > Add New in WordPress (Assuming you are on WordPress 2.7 here. These options are available in any version of WordPress but the exact wording might be different).

Give the page the title “Tag Archive” (It won’t be used in the page’s content, but it will be used in the browser title bar).

Now in the Attributes box on the right, go to the Template section. From the dropdown, choose “Tag Archive” (The name we gave to the tag-archive.php file in section 1).

And that’s it done. Publish your page and go check it out to see how everything looks!

If you aren’t happy with how it has turned out, go back to your tag-archive.php file and edit the wp_tag_cloud code to get it how you like.

Let us know in the comments if you have any trouble. If you’re using a tag archive on your blog, share it with us so everyone can see how you’ve made it look!