Recommended WordPress plugins

From the vast number of plugins available for WordPress it can be difficult to know which ones to install first after you have setup your new WordPress installation. I’ve put together a list of the plugins that I use on this site in the hope that others find it useful.

If you have any other favorite plugins that are not listed here, please leave details in the comments and why you think they are brilliant (and also which category they fall into).

Essential Plugins

Akismet

Akismet is quite possibly the best way in the world to protect your blog from comment and trackback spam. It keeps your site protected from spam even while you sleep.

BackWPup

A great plugin which creates a backup of your WordPress site (both the filesystem and MySQL database) and uploads it to a number of cloud services (FTP, Amazon S3, DropBox, Google Storage, etc) or can just send it by email. Multiple backup schedules can be set, as can the number of total backups to keep. Notifications of backups (or just failed backups) can be sent by email.

Update Notifier

The most important thing you can do with your WordPress site is to keep it constantly up-to-date. Running the latest version of WordPress and your plugins will keep you protected against virtually all attacks. This plugin sends email notifications to the admin by email if a new version of WordPress, plugin or theme becomes available.

Google XML Sitemaps

This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog. Essential to ensure your site gets maximum exposure.


Additional Functionality

Disqus Comment System

The Disqus comment system replaces your WordPress comment system with a much more advanced system hosted and powered by Disqus. The interface is very clean and enhances your user’s experience with extra features. In addition, users can use Disqus without needing to register on your site – something that can put off a lot of people.

Insert Link Class Plugin

Insert Link Class allows you to customise the Styles drop-down menu in TinyMCE (the visual post editor in WordPress). You can specify the Text to display on the menu and the CSS class to be applied to the selecte text in the editor. Unfortunately styles aren’t live in the editor, but you can see their effects when you preview your post.

TinyMCE Advanced

Enables advanced features and plugins in TinyMCE, the visual editor in WordPress. It includes extra features such as font size and family selection, and support for creating and editing tables (essential!).

Google Analytics for WordPress

This plugin makes it simple to add Google Analytics to your WordPress blog, adding lots of features, eg. custom variables and automatic clickout and download tracking. If you want to get an insight into how your users access and navigate your site, then you’ll need Google Analytics.

WordPress Download Monitor

Manages downloads on your site, view and show hits, and output in posts.


Visual Enhancements

Syntax Highlighter ComPress or Better WordPress Syntax

Both of these plugins provide syntax highlighting for code snippets on your blog (either using SyntaxHighlighter or GeSHi). There is little to choose between them but I have found incompatibilities with Syntax Highlighter when using the PageLiens Platform theme .

FancyBox for WordPress

Integrates FancyBox by Janis Skarnelis into WordPress – allows you to include thumbnails in your posts that will be enlarged  is a pretty manner when your visitors click on them, and without navigating them away from the current page.

Tag Functions

This plugin adds the ability to create a list of tags, similar to a category list.

This article was first published on http://www.dba-resources.com.

WordPress Gallery tips

WordPress galleries are a great way to display a sequence of screenshots as part of a tutorial, however there are times when you want more control over which images are displayed than can be achieved with the Gallery settings dialog box.

Creating a Gallery

Firstly we need to upload some images using the “Upload/Insert” link which is shown above the toolbar in the “Add New Post” screen:

When the “Add Media” dialog box opens, upload your images and then navigate over to the Gallery tab where all of the images you have uploaded for the current post will be shown (if you use the multi-file uploaded you will need to click on  “Save all changes” before the tab is displayed):

If you scroll down to the bottom of the image list you will find the Gallery Settings section where you can change settings such as the order of the images and how many columns they should be displayed in. Click the button at the bottom to insert the gallery into your post:

By default, the gallery will display all of the images you have attached to the post. In my example below I have attached 12 photos. While writing your post, a placeholder is shown within the text to indicate where the gallery will be displayed. Clicking on the “Preview” button (towards the top right of the “New Post” page) will open your post in a new window so that you can see what the gallery will look like. In my example of 12 photos, it is displayed as follows:

Example gallery of images

Example gallery of images


Controlling which images are displayed

Before we can control which images are displayed we need to find out the numerical ID that WordPress has assigned to each of the images that we have uploaded. Clicking on the gallery placeholder will highlight it and provide two buttons; one to edit the gallery options and another to delete the gallery.

When the gallery placeholder is clicked, it becomes highlighted and two buttons become available in the top left corner.

Click the edit button (the leftmost button) and it will bring up the same dialog box you saw earlier. This is where we can determine the numerical IDs that we need to control which images are displayed in, or hidden from, our gallery.

Click on the “show” link next to an image and then hover the mouse over the larger preview of the image that appears. The ID of the image shown will then be displayed at the bottom of the page (in Google Chrome) or in the status bar (Internet Explorer). Make a note of the ID for each image.


Hovering the mouse over the larger preview picture will reveal the image ID at the bottom of the browser

Now we have all the information we need to control the images that appear in the Gallery, so close the dialog box.

Excluding images from the gallery

Back in the “Edit Post” screen, switch to the HTML view and look for the following code. This code is the command to display the gallery within the post:

To exclude an image, we simply need to add the exclude option and specify a list of image IDs we don’t want displayed (separated by commas).

Excluding the image above from our earlier gallery of 12 images would result in the following:

Gallery with an image excluded


Gallery with the image ID of 420 excluded


Only displaying specific images in the gallery

If you have a lot of images in your post and you only want to display a few of them then it’s probably much easier to list the images you do want, rather than those you don’t. Again, find the placeholder in the HTML view but this time we specify the include option to list all the images we want displayed.

Using our previous gallery as an example we choose to display only four of the images in the gallery:

Gallery of included images


A gallery showing only the images with an ID of 413, 415, 416 and 419.


Other Gallery Options

Some other useful options used to control the gallery that you might not be aware of are listed below:

id="123"

This option allows you to display images  associated with a different post to the current one by simply specifing the numeric post ID. Note that you cannot mix images from multiple posts.

size="medium"

You can choose the size of the thumbnails displayed within the gallery. Valid options are “thumbnail”, “medium”, “large” and “full”. The actual size in pixels of each of these options can be tweaked at a global level from within the the WordPress admin panel (under Settings > Media).

Enhancing the gallery

There are a number of plugins available that can enhance (or replace) the gallery support built in to WordPress if your needs are more complex.

One plugin that I can heartily recommend is FancyBox for WordPress by José Pardilla, which uses jQuery to display images full size when clicked without reloading the page.

This article was first published on http://www.dba-resources.com.

WordPress info/warning/error boxes

In a number of posts I use some custom CSS styles to highlight sections of the text containing information, warnings, etc.  These are easy to achieve within WordPress by uploading a few images and adding a section of CSS code to your template’sstyle.css file as described below.

Here’s an example of how the “info” style looks once you have completed the simple steps in this post:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.


Uploading the images

The first step is to upload the following four images to your WordPress site. Start by downloading each of them to your hard drive (right click on each and select “save image as”).

   Now select “Media > Add” from the WordPress menu and upload the saved images to your site. Once they have been uploaded, click on the “show” link next to each of the images and make a note of the File URL shown for each one:


Add the CSS to your site

Select  “Appearance > Editor” from the WordPress menu. By default the file loaded into the editor should be style.css (the filename being edited is shown under the title). If this is not the case then select style.css from the list of files on the right hand side of the page (near the bottom).

Add the following CSS to the bottom of the file, changing the URLs to the correct ones for your site, and then click “Update File”.

.info, .success, .warning, .error, .console {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('/wp-content/uploads/2012/07/info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('/wp-content/uploads/2012/07/success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('/wp-content/uploads/2012/07/warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('/wp-content/uploads/2012/07/error.png');
}

For those using LESS CSS you can use the following, more compact version instead:

.hl_img_box(@fg_col, @bg_col, @img) {
    color:               @fg_col;
    background-color:    @bg_col;
    border:              1px solid;
    background-image:    url(@img);
    margin:              10px 0px;
    padding:             15px 10px 15px 50px;
    background-repeat:   no-repeat;
    background-position: 10px 10px;
}

.info   {.hl_img_box(#00529B,#BDE5F8,'/wp-content/uploads/2012/07/info.png');}
.success{.hl_img_box(#4F8A10,#DFF2BF,'/wp-content/uploads/2012/07/success.png');}
.warning{.hl_img_box(#9F6000,#FEEFB3,'/wp-content/uploads/2012/07/warning.png');}
.error  {.hl_img_box(#D8000C,#FFBABA,'/wp-content/uploads/2012/07/error.png');}

Unfortunately, if your theme is updated or you change your site to use a different theme then these changes will be lost and you will have to re-add the CSS to style.css again. Note that some themes do provide an option for you to enter your own custom CSS entries so that they do not get lost when the theme is updated. If your theme allows it, then this is preferable to updating style.css file.

Using the styles

Now everything is in place you can use these styles throughout your site. Whenever you want to include some content within one of the box styles, switch to the HTML view in the post editor and wrap your content with a DIV of the type you want (“info”, “success”, “warning” or “error”) like so:

<div class="warning">
Objects in the rear view mirror may appear closer than they are.
</div>
Objects in the rear view mirror may appear closer than they are.

This article was first published on http://www.dba-resources.com.