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.

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!

WordPress 2.5 is a welcomed improvement

WordPress version 2.5 was released just a week ago with a bit of grumble from the web community but overall I think that it’s a major improvement. This week I upgraded 15 blogs and installed 3 new ones and I must say that everything went without a hitch. I held my breath for quite a few minutes while upgrading one particular blog from version 2.0.2… but nothing broke and everything seems to be in working order.

I must say that the interface has come a long way. I really like the work that the Happy Cog folks and the WP community have created. My favourite component is the image uploading. Having the option to add different types of media and a window pop-up makes it much friendlier.

In the past I’ve used the flexible-upload plugin for re-sizing my images but this new version has made it no longer required.

The only glitch that came about was with the admin drop down menu plugin. If you were a fan of this plugin and upgraded to 2.5 you’ll notice that your navigation has completely disappeared. Just remove that plugin and everything will be back to normal.

If I were to complain about anything with this new version is the absence of post-id. These id numbers are very useful when building sites to be used as CMS. Let’s hope that they bring this back.

I also noticed that when you insert an email address, the tinyMCE interface no longer gives you the alert box telling you that it will convert your email address into the right HTML code. Instead it just sticks your email address into a url, which of course makes no sense. Maybe this is something that needs to be added, but I’ve never enjoyed fiddling with tinyMCE. Has anyone come across this and found a solution?