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:

<?php 
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…