Responsive WordPress Theme and Advanced Custom Fields

This is a rather simple little hack, but came in handy with a site I recently I built.

By default, editing theme options are limited to Administrator accounts in WordPress. For themes like Responsive this means that you must have all your clients logging in as administrators. The admin-level dashboard clutters the navigation with many things most clients should never touch. Another solution would be to modify permissions and create custom permission levels to access those theme options.

Neither seemed very elegant to me. After training with the client, she asked why couldn’t they edit the “Home” page under Pages. Which makes sense. If you manage all of your other pages there, why not the home page!?

Here’s a quick tutorial on how you can use the very awesome Advanced Custom Fields in conjunction with the default Responsive home page layout to manage your homepage content.

First, install ACF if you haven’t already.

Second, create a new page and call it Home.

Because you’re using a child theme you’ll want to copy front-page.php from the Responsive theme into your child theme directory.

Open it up in your favorite editor and look for this section:

<div id="featured" class="grid col-940">
	
		<div class="grid col-460">




			<h1 class="featured-title"><?php echo $responsive_options['home_headline']; ?></h1>
			
			<h2 class="featured-subtitle"><?php echo $responsive_options['home_subheadline']; ?></h2>
			
			<p><?php echo $responsive_options['home_content_area']; ?></p>
			
			<?php if ($responsive_options['cta_button'] == 0): ?> &nbsp;
&nbsp; &nbsp;
				<div class="call-to-action">




					<a href="<?php echo $responsive_options['cta_url']; ?>" class="blue button">
						<?php echo $responsive_options['cta_text']; ?>
					</a>
				
				</div><!-- end of .call-to-action -->




			<?php endif; ?> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
			
		</div><!-- end of .col-460 -->




		<div id="featured-image" class="grid col-460 fit">&nbsp;
							
			<?php echo do_shortcode( $responsive_options['featured_content'] ); ?>
									
		</div><!-- end of #featured-image -->&nbsp;
	
	</div><!-- end of #featured -->

Notice all those echo $responsive_options calls? Those are the hooks the Responsive theme uses to pull the information you put on the homepage under Appearance->Theme Options->Home Page. We want to move those to the page called Home along side all of our other pages.

What we’ll do is create a Field Group in ACF for all the fields on the homepage.

  • Title
  • Subtitle
  • Content
  • Video Link
  • Call to Action Button Text
  • Call to Action Button Link

Here’s and example of what your field group should look like.

Screen Shot 2013-04-04 at 2.09.34 PM

Make sure you also set this field group to show up only on the Home page you created earlier.

Screen Shot 2013-04-04 at 2.18.34 PM

Depending on your preferences you might also hide other fields on the screen – such as the Content Editor, Discussion and Comments.

Now from here you simply replace the responsive_option references with calls to your new ACF fields.

For example:

<?php echo $responsive_options['home_headline']; ?>

becomes

<?php the_field('home_title'); ?>

and

<?php echo $responsive_options['cta_url']; ?>

becomes

<?php the_field('home_call_to_action_button_link'); ?>

The end result is something that looks like this:

<div id="featured" class="grid col-940">
	
		<div class="grid col-460">




			<h1 class="featured-title"><?php the_field('home_title'); ?></h1>
			
			<h2 class="featured-subtitle"><?php the_field('home_subtitle'); ?></h2>
			
			<p><?php the_field('home_content'); ?></p>
			
			<?php if ($responsive_options['cta_button'] == 0): ?> &nbsp;
&nbsp; &nbsp;
				<div class="call-to-action">




					<a href="<?php the_field('home_call_to_action_button_link'); ?>" class="blue button">
						<?php the_field('home_call_to_action_button_text'); ?>
					</a>
				
				</div><!-- end of .call-to-action -->




			<?php endif; ?> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
			
		</div><!-- end of .col-460 -->




		<div id="featured-image" class="grid col-460 fit">&nbsp;
							
			<?php&nbsp;
				
				$video_url = get_field('home_video_link');
				echo wp_oembed_get( $video_url, array( 'width' => 440, 'height' => 440 ) );
				
			?>
												
		</div><!-- end of #featured-image -->&nbsp;
	
	</div><!-- end of #featured -->

You’ll notice that I’m also using WordPress’ wp_oembed_get function to embed the YouTube URL in the featured image section. This way all the folks managing content have to do is insert the YouTube URL and WordPress handles the rest.

Once you’re done all you have to do is visit your Home page and update the fields!

Screen Shot 2013-04-04 at 2.28.22 PM

Must-have WordPress Plugins

Recently I was asked to consult with someone developing a website for their small business. We discussed their goals, developed requirements and at the end settled on WordPress for the content management system. As the individual was developing the site they became familiar with the feature of plugins and asked what would be some essential ones to include in their site. I sat down and put this list together and I’d like to share it with you.

In no particular order, my favorite and most useful WordPress plugins.

Advanced Blogroll – For links to other sites or other online presence (Facebook, LinkedIn, Twitter, etc.) you create links in what’s called a blogroll (The name is a holdover from the early days of WordPress.) The default WordPress configuration displays them in alphabetical order. This plugin allows you to arrange them as you see fit. You can see how “Latest” comes before “Elsewhere” on the navigation to the right. ->

WordPress Database Backup – Lets me sleep at night. Since WordPress stores all of your pages and post content in a database, keeping a backup is a smart idea. I have this setup to email me once a week with a zip file of my database. It’s a small little email and I have Gmail set to filter it out of my inbox automatically.

Jetpack – What once was a gathering of separate plugins is now a super kung-fu collection of some great features. Two of my favorite features are the WordPress Stats and After the Deadline. The stats gives you near real-time feedback on traffic to and from your site. Popular pages, keywords and links displayed automatically in your dashboard. After the Deadline is a super grammar, style and spell checker that uses artificial intelligence to make you sound more-than artificially intelligent. That’s just two of the many features of Jetpack.

Update: I can’t recommend Jetpack highly enough. It’s continued to become the most awesome plugin for WordPress that I’ve ever used. The just recently added a CSS editor that lets you customize your site design without modifying your theme, new comment capabilities (including login using Twitter or Facebook) and Retina support for images!

Akismet – Comment spam blocking magic. Spammers target popular content management systems like WordPress in an attempt to trick site owners into allowing spammy comments. Akismet sits in the background and filters these fake comments without any interaction. According to my stats it’s blocked over 17,000 spam comments with a 99.87% accuracy over 6 years. Not too bad.

Google Analytics – Google Analytics is the most powerful web tracking tool out there. Coupled with WordPress and a good email campaign tool (like MailChimp) you can track your readership with great detail. I could spend hours just going over how useful good web metrics are!

WP Super Cache – This is just incase you suddenly get hit with a million visitors. Normally, WordPress dynamically generates each page and post, which causes a lot of requests for information in the database and all the pictures and styles in  your theme. This plugin uses a complex set of rules to create a static version of your page, making the load on the server much less. There by allowing for many more visitors at the same time.

One last recommendation is not a WordPress plugin but a web service called if this then that. ifttt allows me to glue things I do online together. For example, when I post a photo to Instagram ifttt automatically creates a new post on my site and posts the picture. It can greatly help in automating posting to a lot of other web services, which allows you to spend more time writing content and growing your business than messing with tech stuff.

I hope this helps you firm up your WordPress site and please leave a comment if you have a suggestion of your own.

Update: Two other great plugins I’ve come across since writing this list:

Admin Quick Jump – From the horse’s mouth, “Admin Quick Jump is a very simple plugin that adds a drop down list to the admin edit-post area.” Very handy for moving between posts while editing. Here’s a little screenshot showing how simple it is.

Advanced Custom Fields – This one is definitely more on the geeky side of things (if that could be possible given the topic we’re discussing) but it’s pretty amazing. This plugin allows you to create super extensible custom fields that can contain any number of things. I friend of mine showed me how he’s using it for a site with staff profiles. Each element in the profile (position, title, and other bio information) can easily be edited in a custom field and populated into a formatted template. Easy for users to manage.