Taming Content with Advanced Custom Fields

Has you may know already, I’m a big fan of the Advanced Custom Fields (ACF) plugin. I’ve used it to build carousels, call to action boxes, additional content such as sub-titles, extra featured images,  etc.. When building custom themes for clients it’s important to ensure that updates and adding new content will be as easy as possible. Thus the reason I favour ACF to create meta boxes rather than shortcodes.

In my opinion shortcodes aren’t intuitive, and although as developers were used to seeing brackets and tags, clients may not “see” that a shortcode isn’t closed properly. Meta boxes on the other hand don’t require clients to add tags, brackets or code of any kind.

Not only is the ACF plugin well maintained it also has great documentation and this just got better. Today I discovered another great resource all about using ACF on your website. This free PDF resource written by Steve Grunwell takes a look at the plugin, walks you through some practical examples of building carousels, alternate page headlines, and more, and then discusses the future of the plugin with the upcoming ACF 5 release.

I would encourage you to check it out. Even if you’ve been using ACF for a while, Steve has some great code snippets to share.


Easier conditionals with mobble

A few weeks ago, I was working on a site that had the busiest footer. The footer design made sense on a large screen, but I couldn’t wrap my head around how to make it look great on tablets and phones. I was looking for a way to extend beyond media queries and apply a different design per platform, not just breakpoints. That’s when I discovered mobble.

Mobble is a handy WordPress plugin that provides conditional functions for detecting a variety of mobile devices and tablets.

Once installed, mobble allows you to add conditional statement to your theme templates such as:

if ( is_mobile() ) {
  get_template_part( 'foot-mobile' );
} elseif ( is_tablet() ) {
  get_template_part( 'foot-tablet' );
} else {
  get_template_part( 'foot-desktop' );

Now all I had to do was create different templates for each type of footer. This is so much better than having to fight with media queries.

Some of you will undoubtedly say, that you don’t need a plugin for that. But if your PHP knowledge is limited like mine, this plugin is fantastic!

UPDATE: As noted below in Alex’s comment, if you are using Jetpack, you can also use it’s built in function and target specific devices.

Three ways to give your WordPress site a full screen background image

New design techniques are popping up everyday and now that there are less bandwidth issues, designers have been incorporating full screen background images in their design more and more.

If you wanted to do that yourself but didn’t know how, here are a few techniques ranging from super-easy to advanced.

Super easy plugin solution

The Simple Full Screen Background Image WordPress plugin allows you to easily upload and set a full screen image as the background of your website. Once installed and activated, you’ll see in your Appearance section a new area called, Fullscreen BG Image. You can then browse for your image, upload it and insert it like you would for a blog post. Once uploaded, the plugin will do the rest and make sure that it re-sizes to fit your browser. You may need to play with the size and resolution, but using this plugin couldn’t be easier.

Read more…

Enhance your WordPress website using the Improved Include Page plugin

Ever wondered how you can provide someone with a sidebar text option without having to use widgets? Or maybe you’ve designed a slightly different home page and want to display more than one area of content? Vito Tardia’s Improved Include Page plugin is very useful for that and super easy to use.

Just like any other plugins, simply go to WordPress, download, install the plugin and activate it. Once activated you can use the following function in your templates:

<?php if(function_exists('iinclude_page')) iinclude_page(post_id); ?> 

Creating a sidebar text option without using widgets

If you take a look at the Aquattro Living website, you will see that the contact information appears at the bottom of the left hand side column on all pages. This information is likely to remain unchanged for a long time, but instead of inserting it in the template file and make it unmanageable by the client, all you need to do is create a new page called Contact Us Sidebar, exclude it from the main navigation and insert the include function in your sidebar.php template file.

Display more than one area of content on a template

Both West Coast Sightseeing and Ascent websites have three boxes of content on their home page. These different area of content are easy to create using this plugin. Simply create three new pages, called for example home col1, home col2, home col3 and display the content using the following code:

<div id="col1">
<?php if(function_exists('iinclude_page')) iinclude_page(1); ?>

<div id="col2">
<?php if(function_exists('iinclude_page')) iinclude_page(2); ?>

<div id="col3">
<?php if(function_exists('iinclude_page')) iinclude_page(3); ?>

You would of course change the post_id numbers to the number of your new pages and mark up the css to display the columns as you’ve stipulated in your design.

Optimize your blog with Revision Control

Post revisions we’re introduced with the release of WordPress 2.6. These are incredibly useful especially when you have a multi-author blog, but unfortunately this also increases the size of your MySQL database, which decreases the speed or your site.

If you have access to your database and know what you are doing, then an easy solution is to execute the following SQL statement:

DELETE FROM wp_posts WHERE post_type = "revision";

This simple SQL query will delete all of post revisions and, if you have a lot of posts, this may considerably reduce your database in speed up your blog.

An easier way to do it however, is by installing the revision control plugin. Once installed this plugin allows you to either disable or enable post revisions or what I like to do is to limit post revisions to the latest two.

Revision Control admin screenshot

This plugin is an ideal way to optimize and speed up your blog.

Protect you data with regular back-ups

Yes you’ve heard before, back-up, back-up, back-up. It can be hard and tedious to do database back-ups but it’s very important. Luckily for us, there’s a plugin for that.

The WordPress database backup plugin makes it a cinch to carry out back-ups. Simply download the plugin, install and activate it as you would any other plugin. Once activated, you will find a new menu entitled Backup under the Tools menu. Navigating to this area will reveal a new admin window where you can make a back-up immediately or you can schedule it to be delivered to you via email or downloaded on your server or computer.

Screenshot of WordPress Database Back Up Plugin Admin Area

I’m not sure that back-ups could be any easier.

Secure your website with the Secure WordPress Plugin

For some reason that baffles me, there are loads of morons out there who have nothing to do but hack into websites. Because WordPress is Open Source, the source code is also available to them. The best way to protect yourself from attack is to update your WordPress to the latest version, but you can also make it a bit more difficult by hiding what version of WordPress you are using from everyone.

Depending on which template you start with, you may find the following line of code in your header.php file.

<meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” />

If you do, take it out.

If you are running version WP 2.6 or higher, and you should be, you will notice that this line may not be there, but appears in your source code. This line of code is generated from the wp-head.

To remove the version from appearing in your source code, I like to install the secure WordPress plugin. The plugin not only removes the WordPress version it also remove error information on the login page and adds an index.html file in the plugin directory.

Organise your WordPress pages with the My Page Order plugin

When using WordPress as a CMS, you may end up with numerous pages and sub-pages. WordPress provides you with the ability to order your pages by giving them a number, but the process is very clumsy and takes way too long if your site is deep.

The self proclaimed computer geek at Geeky Weekly has created a plugin that lets you set the order of pages through a drag and drop interface. It’s very convenient and super easy to set up. Once you’ve downloaded it, installed it and activated it, you will see in your Pages sub navigation area a new link called My Page Order.

Navigating to this page brings you to a screen which looks like this:

My Page Order Interface
My Page Order Interface

All you have to do is simply drag and drop the pages where you want them to appear and hit the button. It couldn’t be more simpler. I never install a website without this plugin. I love it and can guarantee that you will too. If you like it a lot, you can visit the Geeky Weekly website and make a donation.

Enhance Dental Centre enhanced with jQuery

Enhance Dental CentreUnless your a web developer you might not have heard about jQuery. As defined in Wikipedia, “jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML”. Released in 2006, it’s use is very common on many websites, yet, I’ve never had a chance to play with it, until now.

Inspired by a beautiful design by Mizu Creative, my task was to convert the design into a WordPress based website enabling the client to make edits themselves and insert a series of slide shows with different behaviours. Converting the design into WordPress templates was a breeze, but finding a way to integrate the slide shows proved challenging. My initial thought of course was to use flash, but flash is expensive, annoying, hard to update and quite frankly, I don’t like it. I knew that Tzaddi had recently built a WordPress site where she used jQuery, so I thought I would investigate.

After a couple of Google searches, I found exactly what I needed.

InnerFade by Medienfreunde
The first demo I found was the InnerFade plugin. As the name suggests this plugin allows a series of text or images to fade in and out.

I’m not exactly sure who created this code, because my German is non-existent, but using his/her demo, I found the solution for one type of slide shows and used it on several sections of the Enhance Dental Centre website including this page, where you can see a series of before and after shots fading in an out.

Better Coda Slider by Remy Sharp
The second demo I found was the better coda slider. The aim of Remy‘s demo was to look at the original effect used on the Coda site and improve on it. Once again, using his example and making a few adjustments, I was able to use the code and create a “slider” effect where users can view the various testimonials.

All in all, I’m very pleased with the final outcome of the site. What proved to be daunting and challenging initially, turned out to be fairly simple and I look forward to playing with jQuery on more sites. What are your thoughts?

Spam vs. Ham

Akismet is probably one of the best WordPress plugins out there. Since my first installation of Akismet, 14,732 spam comments have been caught and eliminated. Today, Akismet 2.2 was launched and along with the usual bug fixes, came stats. The stats provide you with a graph showing how much spam was caught per day and a yummy pie chart with spam vs. ham! Personally, I would have called it nifty pie chart, but whatever, this is so geeky; I love it!