Gravity Forms is fantastic tool for collecting names, email address and postal addresses. However, GravityForms is a US plugin, so the default form labels are all US or Canada-centric. Here’s a simple tweak that you can add to functions.php to make your custom address form show UK-labels for addresses.

By default, Gravity Forms will show:

• State / Province / Region
• Zip / Postal Code

Which is fine, but for UK-only websites, we’d like to be a little more British. So if you copy the following snippet of code into your template functions.php, you’ll end up with much more UK-centric labels for your address entry on your Gravity Forms.

/**
 * Function to make the address fields GravityForms more British.
 */
function customiseFormLabels($addressTypes, $formID)
{
	$addressTypes['international']['zip_label'] 	= 'Post Code';
	$addressTypes['international']['state_label'] 	= 'County';	

	return $addressTypes;
}

// Use this one to change all gravity address forms to be more British
add_filter('gform_address_types', 'customiseFormLabels', 10, 2);

// To only change the labels for Form ID = 2, use the following instead.
// Note that the form ID goes after gform_address_types as gform_address_types_ID
//add_filter('gform_address_types_2', 'customiseFormLabels', 10, 2);

Instead, you’ll get the following:

• County
• Post Code

Much more British. You may now sing the National Anthem. :)

Although we’re less interested in the actual copyright for a website, correctly setting the copyright year in the footer of a web page/site is something that us web developers and webmasters are keen to do every 1st of January.

However, if you have a PHP-based website (such as WordPress), then here’s a simple bit of code you can copy-n-paste to always have the right date in your website footer.

A website started before this year

If your website was started before the current year (e.g. 2011), then this will work perfectly. The date(“Y”) code will output the current year, so the following will show “© Copyright 2011-2012” if the current year is 2012 (which it is at the time of writing).

&copy; Copyright 2011-<?php echo date("Y"); ?>

A website started this year

If you’ve started a website this year, then you clearly don’t want to show “Copyright 2012-2012“. So that’s why you can use the code below, which will automatically include subsequent years once you move into next year (so 2013 in this case).

<?php
// Goes anywhere you like, if using WordPress, then we recommend putting it into functions.php.
function showDateRange($startYear) {
	$thisYear = date("Y");
	if ($startYear == $thisYear) {
		return $thisYear;
	}
	return sprintf('%s-%s', $startYear, $thisYear);
}
?>

And this bit goes into footer.php if you’re using WordPress, or your main template if using any other PHP-based template.

&copy; Copyright <?php echo showDateRange('2011'); ?>

What you’ll get is:

• © Copyright 2011 – when you’re in 2011
• © Copyright 2011-2012 – when you’re in 2012
• © Copyright 2011-2013 – when you’re in 2013, etc

You’ll never need to update the footer copyright again! :)

I’ve been using Gravity Forms for a long time now (roughly 2 years at the time of writing). It has become the only contact form plugin that I will use on either my own websites or on client websites.

The Gravity Forms plugin is packed full of features, but this article explains the reasons why I like it. This is not really a full Gravity Forms review, more of a highlight of the aspects that make it useful to me. Hopefully this article gives you some ideas of what you can do with the plugin that you’ve not already thought of!

1) Massive Time Savings

Creating potentially very sophisticated forms takes a few minutes using Gravity Forms. If you are technical, it’d take a few hours to do it properly in PHP. So using the plugin saves valuable time, and it’s less error prone.

2) Backup Form Submissions

When a website visitor submits a form, any successful submissions are stored in admin area. This means you can download the form submissions as a CSV (comma-separated values) file.

Once you have the CSV file, you can import the entries into a spreadsheet for doing detailed analysis. So in addition to getting a backup of all form submissions (in case you don’t receive a notification email), you can do some statistical work on submissions too.

3) Easy-peasy Post Creation

With the correct fields, Gravity Forms can create posts directly, including setting featured images and setting the post category. This is perfect if you have a directory-type website where each post is a profile of a person or business, and users can submit their details via a form.

If you really want to get nifty, Gravity Forms can also create Custom Post Types and work with Custom Taxonomies if you use this free 3rd-party plugin.

4) You can accept Paypal payments

If you opt for the developer licence of Gravity Forms, you also get the Paypal AddOn. The Paypal AddOn allows you to accept a payment as part of the form submission process, either like a booking form or a pseudo-shopping cart. If you have a custom booking process on your website, then Gravity Forms makes it really to accept a payment via Paypal too.

You could even use the Paypal support for a paid support request, as payment can be taken along with accepting the support question and contact details.

5) Easy mailing list support with MailChimp

Since Gravity Forms works nicely with MailChimp (using the MailChimp AddOn in the developer package), you can easily add mailing list subscription to any existing contact form you have. e.g. you could have a ‘Tick here to get the newsletter’ on your contact form, to saving having more than one contact form.

MailChimp does require a lot of work to get a nice looking signup form. Thankfully Gravity Forms removes that headache by making it really easy to make a neat-looking contact form.

6) Easy tweaking for non-techies

If you’re not technical, playing with code probably causes you some headaches! But if you’re not technical, you can easily create new forms, as well as tweak existing ones.

This works great for my clients who want to be able to adjust the information they collect at a later date. This gives them the peace of mind that they have control over their own website.

7) Easy migration of forms between websites

Just imagine, you’ve spent a few days (or even weeks) perfecting your website form. Now you want it on another website you have? Thanks to Gravity Forms, you can export and import any form to a new website running Gravity Forms. Clearly this saves you plenty of time, as well as minimising any copying errors that might creep in by forgetting an important detail.

8) Personalised email notifications

The email notifications (following a successful form submission) can be customised.

This means you can create personal acknowledgement emails to anyone who fills in one of your forms. This gives your website a more professional feel, and reassures the website visitor that their contact message was successfully received.

The fundamental benefit?

The overall benefit of Gravity Forms is that it saves you lots of time. If you’re not technical, then you get lots of capability for very little effort. Time is so short these days… why bother doing things the slow and painful way? Use Gravity Forms instead!

(Worthy note: No, I don’t work for Rocket Media, I’m just a big fan of their plugin!).

I was approached at the weekend by one of my clients who was having trouble centering the gallery slideshow from using the NextGEN Gallery WordPress Plugin. For those of you who don’t know, NextGEN Gallery is a free plugin that allows you to show off your photo galleries on your WordPress website. So this blog post features a very simple fix to centre the current slide on a page.

Out of the box, NextGEN Gallery is very powerful, but invariably requires some CSS tweaks to get the look and feel you want. The gallery plugin is user-friendy and easy to use, making light work of uploading load of photos at once. One of the main features is an automatic slideshow that iterates through all images in a gallery (in NextGEN, a gallery is a group of photos). I won’t go through the details of uploading photos, nor how you add a slideshow to a page. I’m just going to focus on the fix that ensures the slide is centered in the page.

Default Alignment - to the left

By default, the current photo (or slide) is aligned to the left. This is because the width of the slideshow panel is set to the width of currently shown image. So any narrow images will automatically align to the left.

The fix is this simple bit of CSS, added to the theme styles.css. The first section will set the width of the slide holder to be the width of the page container. The next section will center align all of the contents of the slide holder, i.e. the images. The final block of code removes the absolute positioning of the image (defined by an inline CSS style created by NextGEN), which allows the image elements to take notice of the margins as defined in the 2nd section.

/* Gallery Fixes */
.ngg-slideshow {
   width: 100% !important;
}
.ngg-slideshow * {
    margin: 0 auto !important;
}
.ngg-slideshow img {
    position: relative !important;
}

In some browsers, such as Chrome, I discovered that the first image wasn’t always centered. After looking at the code in Firebug, I found that the first image was set to display: inline, which would ignore the margins as defined above. Therefore defining display: block works a treat.

.ngg-slideshow img {
    display: block;
}

So the final code to achieve centering like that above is:

/* Gallery Fixes */
.ngg-slideshow {
   width: 100% !important;
}
.ngg-slideshow * {
    margin: 0 auto !important;
}
.ngg-slideshow img {
    position: relative !important;
    display: block;
}

Centering the Slideshow

Thanks to Solanki Photography for the interesting challenge!

Increasingly, I’m being asked my advice on how you can optimise your WordPress website to reduce loading times. Reducing loading times improves the user experience for your visitors, so they get to see your website more quickly. Search engines such as Google also use page loading times as a factor in their ranking algorithm. If you want great rankings, ensure your website loads quickly.

Performance tuning is a bit of an art, and you need a fair amount of technical ability to squeeze every last drop of speed from your WordPress website. Ultimately, you want to get data down the internet pipe as quickly as possible. Reducing wastage where possible is a key part of that.

There are some very quick wins you can make with just a basic technical understanding of WordPress… and I’ve compiled them into this article. You’ll notice that there is technical language in this article, and I assume some familiarity with WordPress themes, HTML and CSS. You should get noticeable improvements in page load times just by following these tips!

1) Minimise the number of plugins you have

Too many plugins can slow a WordPress website down very easily. There’s no optimal number of plugins to have installed, simply because it depends on how complex a plugin is and what your server specifications are. Based on my own personal experience, the average number of WordPress plugins installed on a website tends to be between 10 to 25.

• If you’re not using a plugin, remove it – This is good house-keeping, and will slightly speed up the loading of the admin area of WordPress.
• For basic plugins, see if the functionality can be added directly to your theme – e.g. basic shortcodes and many social media plugins can often be moved to your template files by a half-decent WordPress developer. Plugins add an overhead to load times as they are initialised, so moving essential functionality to theme files removes that overhead.
• Use plugins that blend the functionality of several plugins – some plugins combine useful functionality into a single plugin. Again, this marginally reduces load times. e.g. Yoast’s WordPress SEO combines XML sitemaps, SEO tweaking and navigation breadcrumbs.

2) Remove embedded stylesheets from your header

There are some WordPress plugins and themes that are badly implemented, storing cascading style sheet (CSS) information in the header of the web page.

<html>
    <head>
        <title>This is the page title</title>
        <style="text/css">
         h1 {font-size: 150%; color: red; }
         h2 {font-size: 120%; color: blue; }
         p {font-size: 100%; color: black; }
        </style>
    </head>

Why it’s bad…

Say you had 5kb of CSS information in the header area. That’s 5kb being added to every single web page the user visits. Now 5kb doesn’t sound like a lot, but it still adds crucial miliseconds to the page loading time.

So if a website visitor views 5 pages, they download the same CSS data 5 times. Since the CSS data is 5kb, then the user downloads a total of 25kb of CSS data (5x 5kb) to view 5 web pages.

How to fix it…

If that CSS was stored in an external CSS file, rather than embedded in the header, then the website visitor only downloads that CSS information once, as it’s stored in the web browser’s cache. Any subsequent page that’s loaded just references the external CSS file, and still benefits from the style information in that file.

The HTML

<html>
    <head>
        <title>This is the page title</title>
        <link rel="stylesheet" href="styles.css" type="text/css" media="all" />
    </head>

The CSS (which goes in a CSS file, e.g. styles.css for your WordPress theme)

h1 {
    font-size: 150%;
    color: red;
}
h2 {
    font-size: 120%;
    color: blue;
}
p {
    font-size: 100%;
    color: black;
}

Now if the website visitor views 5 pages, they download the CSS data on the first visit. The CSS data is stored as an external file in the browser cache, and it’s then referenced 4 times on the subsequent page views. Since the CSS data is 5kb, then the user downloads a total of 5kb of CSS data. So on 5 web page views, you save them 20kb of waste.

3) Remove inline style information from HTML

This mostly affects WordPress themes, it’s where style information is embedded with the HTML. It’s called inline CSS. It looks like this:

<table style="padding: 3px 5px; border: 1px solid #CDD;">
    <tr>
        <td style="background: red; color: #FFF">Error</td>
        <td style="background: red; color: #FFF">This is the error message</td>
    </tr>
</table>

Why it’s bad…

As with point 2) above, with header CSS, having lots of style information in the HTML also slows down the page loading time. If you have exactly the same style information on several pages, then you have considerable waste. It also makes the style harder to adjust in the future (e.g. colour changes), as the CSS is spread out over many different pages.

How to fix it…

You should use CSS correctly, and give HTML elements a CSS class or ID, so that you can reference them in a CSS file. As in point 2) above, the CSS information is then loaded just once, which is much faster for your website visitors. So split the HTML and CSS into 2 places:

The HTML

<table class="error-table">
    <tr>
        <td>Error</td>
        <td>This is the error message</td>
    </tr>
</table>

The CSS (which goes in a CSS file, e.g. styles.css for your WordPress theme)

.error-table {
   padding: 3px 5px;
   border: 1px solid #CDD;
}
.error-table td {
   background: red;
   color: #FFF
}

4) Compact your images

Most images are not stored in the most efficient way when you save them in a graphics package. You can get some great savings on page load times if you use an image compacting tool.

There’s a great tool from Yahoo called Smush.it, which will remove all of the unnecessary data from an image file, without damaging the quality of the image. It’s a lossless size-reduction tool (I’m intentionally not using the word “Compression”), so you don’t need to worry about your images looking blocky or distorted.

The Smush.it tool preserves folder locations too. So if you point the tool at a website, it will resize the images and provide a zip file for you to download. When you extract the zip file, you can just upload the complete file structure to overwrite your existing images with their smaller counterparts.

There’s also a Smush.it WordPress plugin, which will compact your images as you upload them via the Media Uploader.

You can save hundreds of kilobytes by compacting your images, so this represents one of the biggest savings you can make in reducing waste data, and therefore one of the most effective performance tweaks you can do.

5) Use WP Minify to compact your CSS and Scripts

Usually, CSS and Javascript files contain lots of comments and white-space (e.g spaces and blank lines). From a developer’s point of view, those comments and white-space make maintenance considerably easier, as the code is easier to navigate. However, your website users aren’t going to be doing anything with your website source code, so those extra white-space characters and comments are pure wastage.

WP Minify - Before minification

Therefore I recommend using a plugin such as WP Minify, which will compact all of your stylesheets and scripts automatically. You’ll typically achieve a 30% to 60% reduction in script sizes as a direct result.

WP Minify - After minification

For Developers: The reason why I suggest using this plugin rather than compacting scripts before uploading them to the website, is so that the Minify engine can work its magic on scripts and stylesheets that you haven’t developed. e.g. Scripts from 3rd party plugins. Spending your time compacting those scripts each time a user updates a plugin is possible but impractical if you’re as busy as I am! So WP Minify gives you quick results with the least fuss.

6) Using WordPress caching plugins

Using plugins that cache your website files and database queries can considerably improve your loading times. You can shave valuable seconds off each page load simply by configuring your caching plugin correctly.

If you’re not that technical, then WP Super Cache will give you great results, just by selecting all of the Recommended options. If you’re more technically inclined, then you definitely need to spend time with W3 Total Cache. Mastering W3 Total Cache takes a long time, but as you do, you’ll find your websites perform very well indeed.

7) Enable gzip Compression Mode

The above caching plugins have a gzip compression mode, which will compress all of the data sent from your server to your visitor’s web browser. The compression is done on-the-fly, and can easily reduce page load times by as much as 50% yet again. It’s a bit like automatically sending someone a zip file of your website each time they visit a new web page.

Using gzip mode can have a dramatic effect on page load times, but beware, some servers don’t properly support gzip. When that’s the case, your visitors just see garbled data. So just make sure you test your website in the major web browsers to make sure all is well.

8) Have a Facebook Fan Box? Cache it!

If you have a Facebook Like/Fan Box, you’ll notice that it does take a little while to load. However, Facebook fan boxes are great for getting valuable traffic from Facebook, so they are worth having.

I’ve been having great results with the Facebook Fan Box Cache plugin. The widget massively reduces the number of HTTP requests, making your website finish loading much sooner. You will need to add your own CSS to make it look good, but I find that the improvements in loading times are worth it.

Conclusion

So there you go, 8 quick wins to improve the performance of your WordPress website. Although some of the tips require some technical ability, they are pretty easy to implement, which is why I justify them as being quick ;) !

In an age of impatient visitors, you want your website to load within 2-3 seconds. Just remember, shaving off milliseconds and kilobytes from different areas of your website will add up to reductions of several seconds in overall page load times. Using a plugin such as YSlow for Firefox will help you diagnose where your performance problems are.

I wish you good luck with your tuning adventures! Please do share your own tips for WordPress performance tweaking in the comments area below.

The Question

Hello WP Doctors! Can you help and advise me?

I am looking at the possibility of starting a local community website in my area. WordPress comes up trumps as the ideal ‘platform’ to start my website. Initial local feedback from residents in my area; indicate to me that people would like to watch video blogs on the site regarding local issues and concerns.

Can we have a WordPress based theme where the emphasis is on ‘video blogs’? The theme must be ‘user friendly’ so idiots like me can maintain it. The videos will be uploaded to Youtube and should be easily linked to the Website.

The Answer

Hi Shahid, there are lots of WordPress themes for creating video blogs. Increasingly, I recommend using a Premium WordPress Theme for new websites, as they are typically better designed and more robust. I’ve found 5 WordPress themes that are designed for Video Blogs that may interest you. There are plenty more themes out there, but these will get you started.

Generally I recommend WooThemes WordPress themes over themes from ThemeForest, as typically you get a better quality and easier-to-use theme from WooThemes. I’ve provided some suggestions from both providers to give you some ideas.

I hope that helps?

1) Groovy Video from WooThemes

2) MyStream from WooThemes

3) Wave from ThemeForest

4) wpShow from ThemeForest

5) MyVideoBlog from ThemeForest

Given that Christmas is just 2 weeks away, it’s no surprise to see a few websites having a Christmas theme. In fact, some websites even have full-on Christmas logos, just like the UK gadget website Zath.

However, if you don’t have the time or money to get a Christmassy logo designed, then you can really easily add snow to your WordPress website with a plugin. Sure, there’s a bit of a performance hit, but it is a bit of fun!

The WordPress Directory is filled with animated snow plugins, so it’s worth trying a few to see what works for you.

Showing the Animated Snow on Gifts4Men

I congratulate the following websites who have added snow to their websites for Christmas this year:

• Gifts4Men – Gifts and gadgets that blokes will love.
• NetCodes – A voucher code website.
• Siop Ty Tawe – A Welsh gift shop.
• PC Checker – Top Laptop and PC deals.
• Confident Factor – Professional and business coaching.
• Cake Tins – Funky cookware for making cakes in pretty much every shape you can think of.

And if you’re reading this article in July, these websites have probably disabled the plugin by now. Probably.

Have you done anything Christmassy on your website? If so, please me know in the comments!

To see what we’re trying to achieve, this is a live example of the grid system working.

Grid Demo

A collection of websites for the grid demo.

BBC News

http://news.bbc.co.uk

A popular destination for up-to-date news in the UK and around the World.

EnviroGadget

http://www.envirogadget.com

One of Dan's websites focusing on the best of eco-friendly gadgets.

Google

http://www.google.co.uk

The search engine that most people use.

Smashing Magazine

http://www.smashingmagazine.com

One of the most interesting design-based websites on the web.

Wordpress

http://www.wordpress.org

A slightly famous place to download a user-friendly content management tool for websites.

WP Doctors

http://www.wpdoctors.co.uk

Our very own website, where you can find info on our WordPress development services.

 

The portfolio shortcode and HTML

The HTML/shortcode you need to paste into a page or post to achieve the above layout is simply this:

<div id="portfolio-grid">
[wp-portfolio groups="1"]
<div class="footer">&nbsp;</div></div>

The portfolio shortcode and HTML

The CSS you need to give the grid layout (which can be pasted into the Template CSS section in Layout Settings in the plugin settings, or into your template’s styles.css) is below.

/* Grid Example */
#portfolio-grid .portfolio-website {
    width: 150px;
    float: left;
    height: 245px;
    border: 1px solid #BAD4E3;
    background: #E3EAF2;
    text-align: center;
    margin: 3px;
}
#portfolio-grid .website-description {
    text-align: left;
}
#portfolio-grid .website-name {
    font-size: 10pt;
}
#portfolio-grid .website-url {
    display: none;
}
#portfolio-grid .website-thumbnail {
    float: none;
    text-align: center;
    margin: 3px auto 10px;
}
#portfolio-grid .footer {
    clear: both;
}

The bits that make it work are the width of each portfolio item, the floating left, and the fixed height. All the other styles can be adjusted to suit your website.

Enjoy!
Dan

The motivation for adding an email address confirmation field was to help avoid visitors typing in the wrong email address, and therefore ensuring as many people as possible correctly sign up to the newsletter.

Since Gravity Forms does not currently natively support comparing values between fields, I needed to add my own custom hook to compare and validate the email address fields.

The Solution

First I check that I’m validating the correct form, as it’s pretty common for me to have more than one form per website.

Once the form has been validated, I check that the email address fields match (note that I’ve needed to hardcode absolute field names to refer to the two email address fields). The comparison is performed using a case insensitive search, just so that a minor difference in email address due to a capital letter is ignored.

If the fields are found to not match, the form is invalidated, and the 2nd email address field is marked as invalid with an appropriate error message. This approach works perfectly with AJAX-based forms too.

I hope that you find it useful!

/**
 * Custom validation for gravity forms that will validate
 * the 2nd email address field for a form that has an
 * email address field, and a 'confirm your email address'
 * field as the first 2 fields in a form.
 *
 * @author Dan Harrison (http://www.wpdoctors.co.uk)
 */
function custom_validation($validation_result)
{
    // Extract the form from the validation result
    $form = $validation_result["form"];

    // Ensure we only validate the form entitled
    // 'Newsletter Signup' otherwise return the
    // result of the validation that's already been
    // determined (i.e.
    if ($form['title'] != 'Newsletter Signup') {
        return $validation_result;
    }    

    // We want to ensure that the 1st and 2nd fields
    // match, as it's an email confirmation box
    // First field (0 index) is the email address field
    // Second field (1 index) is the field to confirm
    //  the email address

    // Get the values from $_POST to do the
    // comparison (watch the input numbers, as
    // they're not 0-indexed as above).
    // First field = $_POST['input_2']
    // Second field = $_POST['input_3']

    // Email addresses match (case insensitive, but
    //  use strcmp for case-sensitive comparison)
    if (strcasecmp($_POST['input_2'], $_POST['input_3']) == 0)
    {
        // Nothing to do, fields already match
    }

    // Email addresses don't match.
    else
    {
        // We're doing our own validation now, so
        // override the validation for the whole form.
        // Setting the default to false.
        $validation_result["is_valid"] = false;

        // Invalidate the 2nd email address
        $form["fields"][1]["failed_validation"] = true;
        $form["fields"][1]["validation_message"] =
                   "The email addresses do not match. ".
                   "Please check your email address is correct in both boxes.";
    }

    // Update the form in the validation result
    // with the form object we've modified
    $validation_result["form"] = $form;

    // Return the validation result to
    // continue the action.
    return $validation_result;
}
add_filter('gform_validation', 'custom_validation');