• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add Custom Content Outside The Content Area

In this tutorial, i’ll show you how to add text, HTML, Images or any other type of content outside the content area of a post or page.

On top of this, you can also use the WordPress editor outside the content area to add content exactly the same as you would with the default editor.

There’s 2 simple steps involved:

  1. Simply install the free Advanced Custom Fields plugin.
  2. You’ll also need to add a few lines of PHP code to your child themes functions.php file.

Here’s a screenshot of what your post/page edit screens look like after you’ve completed both steps.

custom editor

The above screen shot shows a second smaller editor has been added to your edit screens. You can control where this editor is displayed on your screen and which screens its displayed on using the plugins settings for Location > Rules and Options > Position.

Custom Fields Settings

Here’s the settings i used to add the small editor for custom content.

custom field settings

Custom Fields PHP Function

Simply copy this PHP code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++.

Other Theme Locations

You can easily change the hook position if you want your content to display in another location like after posts.

And you can easily change the conditional tag in the code to display your custom content on archive pages like your category archives.

add_action('genesis_before_content_sidebar_wrap', 'custom_content');
function custom_content() {
if ( is_category() && genesis_get_custom_field('custom_content') )
echo '<div class="custom-content">'. genesis_get_custom_field('custom_content') .'</div>';
}

You’ll also need to change the plugins custom fields Location settings to something like this.

location

Styling Your Content Without Adding CSS

In the example below, i haven’t added any CSS code however i have used the existing class for the comment form allowed tags in the PHP code snippet below.

Styling Using Existing CSS classes

Code which styles your custom content the same as the screenshot above:

add_action('genesis_before_loop', 'custom_content');
function custom_content() {
if ( is_singular(array('post', 'page')) && genesis_get_custom_field('custom_content') )
echo '<div class="form-allowed-tags">'. genesis_get_custom_field('custom_content') .'</div>';
}

If you’ve already added CSS code for creating colored content boxes, you could use the class for the boxes in your PHP code like this:

add_action('genesis_before_loop', 'custom_content');
function custom_content() {
if ( is_singular(array('post', 'page')) && genesis_get_custom_field('custom_content') )
echo '<div class="content-box-green">'. genesis_get_custom_field('custom_content') .'</div>';
}

And this is what it may look like above your post or page title:

content color

Otherwise you can simply use the new class the PHP code generates (.custom-content) and add your declarations to it in your child themes style sheet.

I hope this tutorial has given you a better understanding of how to add custom content outside the content area your WordPress editor displays.

More On Custom Fields & Custom Meta Boxes

  • How To Create a Custom Field
  • Create A Meta Box For A Custom Field
  • Add Unique Header Images Using Custom Fields
  • How To Add a 2nd Meta Box for a Different Featured Image
  • Add Different Content Between Excerpts On Any Archive Page

Reader Interactions

Comments

  1. John says

    March 20, 2014 at 10:02 pm

    Hi Brad

    I was wondering if you got a link that explain or perhaps you could explain why I should use . genesis_get_custom_field(‘custom_content’) . like you are doing above instead of the code examples from ACF website. Also if you see this link http://www.studiopress.com/forums/topic/advanced-custom-fields-repeater/ then they are using ACF code and not genesis custom fields code.

    Appreciate all the tuts you are making.

    Log in to Reply
    • Brad Dalton says

      March 20, 2014 at 10:25 pm

      genesis_custom_field() is a function that prints the value of your custom field key.

      Located on Line 190 genesis > lib > functions > options.

      function genesis_custom_field( $field, $output_pattern = '%s' ) {
      
      	if ( $value = genesis_get_custom_field( $field ) )
      		printf( $output_pattern, $value );
      
      }
      Log in to Reply
      • John says

        March 23, 2014 at 11:39 am

        Appreciate the answer.

        Thanks a lot for all your help.

        Log in to Reply
        • Brad Dalton says

          March 23, 2014 at 5:28 pm

          You’re welcome John

          Log in to Reply
  2. John Culpepper says

    September 26, 2013 at 3:43 pm

    Brad,

    I using this guide I was able to modify the site-tagline-left on my minimum-pro theme so I can have a custom call-to-action for individual pages. Thanks!

    John

    Log in to Reply
    • Brad Dalton says

      September 26, 2013 at 5:01 pm

      No worries John

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.