Category: Usability and HCI

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.

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

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!