WP SITES

Log in

Adding Content Before Your Posts On The Blog Page Only

—

by

Brad Dalton

The easiest way to add text, HTML and images on your blog page before your post listings is to create a custom blog page template.

This way you can simply add content to the blog page template using your WordPress editor.

This tutorial relates to the use of the Genesis theme framework only.

There’s at least 3 ways you can add content to your blog page:

  1. Adding a custom blog page template to your child theme
  2. Creating a widget area before posts on the blog page only
  3. Hook in content directly using a custom function with conditional tag

Creating Blog Page Template

Add this code to a new file using Notepad++ or some other text editor.

Name the file page_blog.php and upload it to your child themes root directory.

Next step is to create a new blog page and select this page template from your Page Attributes.

Page Attributes

You can then add content to your custom blog page using the WordPress editor and it will be displayed before you posts are listed.

Here’s an example of what the custom blog page looks like with some text added to the editor and tested on the Executive Pro child theme by StudioPress.

Custom Blog Page

Removing The Duplicate Blog Page Title

Add the following PHP code to your functions file:

remove_action( 'genesis_before_loop', 'genesis_do_blog_template_heading' );

Adding Widget Area To Blog Page Only

You can go even further and add a widget area to the top of your blog page template (archives).

This snippet contains PHP code which will register a new widget area and output the content using the Genesis actions hooks which executes in the location you want your widget content to display.

Paste this code into your child themes functions.php file.

This code will create the widget area so you can output the widget content before your blog posts are displayed in a list on your blog archives page.

It also includes a conditional tag which displays the Secondary (Sub) nav menu on the blog page only.

Or you can simply hook in your text or HTML directly using the same conditional.

Display Locations

You can simply edit the PHP code and change the hooks for displaying in other hook positions as well as changing the conditional tag.

This code is very similar to adding a widget after the post content.

Related Tutorials

Comments

15 responses to “Adding Content Before Your Posts On The Blog Page Only”

  1. Stephanie Monty Avatar
    Stephanie Monty

    Hi, Added the hide title code to functions.php but it’s still showing on Essence Pro. Any ideas?

    https://gardenersstage.wpengine.com/blog/

    1. Brad Dalton Avatar
      Brad Dalton

      Try the following code from this new tutorial

      [code]
      add_action( ‘genesis_meta’, ‘remove_essence_blog_title’ );
      function remove_essence_blog_title() {
      remove_action( ‘essence_entry_header’, ‘genesis_do_blog_template_heading’ );
      }
      [/code]

      1. Stephanie Monty Avatar
        Stephanie Monty

        Hi Brad, thanks! Tried the code you sent. It removed the “Hero” blog title instead of the duplicate title that shows in white at the beginning of the entry content…had the reverse affect I need.

        https://gardenersstage.wpengine.com/blog/

        1. Brad Dalton Avatar
          Brad Dalton

          The code removes the blog page title as requested. Seems you don’t want to remove the blog page title but the entry title for the 1st post ( entry )? Whats the name of the title you want to remove? There is no duplicate title in white that i can see.

          1. Stephanie Monty Avatar
            Stephanie Monty

            Hi Brad,

            Here is the page without the code you sent: https://gardenersstage.wpengine.com/blog/

            Here is a screenshot of the page with the code you sent: https://gardenersstage.wpengine.com/wp-content/uploads/2019/11/Screen-Shot-2019-11-15-at-5.37.52-PM.png

            The only other thing I’m trying to figure out is how to get the blog comments and “leave a comment” to the bottom of the posts…

            thx!

          2. Brad Dalton Avatar
            Brad Dalton

            I assume you want to remove the heading : Field and Garden Blog? Might be best if you send me access. https://wpsites.net/contact/

  2. Cath Avatar
    Cath

    Thanks Brad, blog template worked perfectly on my exec-pro customisation.

    Cheers,

    Cath

  3. Teo Avatar
    Teo

    Hi Brad,

    How about if I want to add something on category pages only.
    I tried this:

    but didn’t work.

    I guess I’m not sure how to call the category pages in that code.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Teo

      Your code didn’t display however you can simply add a conditional tag after the function name.

      Try:
      [code]
      if ( is_category() )
      [/code]
      or
      [code]
      if ( in_category() )
      [/code]

      Example http://wpsites.net/best-plugins/add-html-image-before-category-archive-posts/

      1. Teo Avatar
        Teo

        Thanks, that works now!

        I have another question.
        I am have Widget on post pages with “genesis_entry_content” hook
        See the code I am using here: https://gist.github.com/anonymous/a4d4bd1517acf21e06c0

        That works fine except I would like to have the Widget buttons to show just after the text content. At the moment the social share buttons are showing before my widget. See screenshot: http://postimg.org/image/vi5q2dd7v/

        How can I make the Widget appear before the social buttons?

        1. Brad Dalton Avatar
          Brad Dalton

          You need to move the buttons to a lower hook because they output using the content filter which is before the genesis hooks.

          Move the buttons to loop_end, genesis_entry_footer or genesis_after_entry.

  4. caz p Avatar
    caz p

    Hello, I added the page_blog.php to my child theme which is magazine pro. But it still shows nothing on the main blog page.

    I wanted an introduction to my blog before all the posts and followed your instructions to the letter using this link: http://my.studiopress.com/snippets/blog-page-content/

    But nothing has happened. Am i missing something?

    The version above has this code inserted :
    Template Name: Blog
    [code]
    add_filter( ‘body_class’, ‘blog_page_body_class’ );
    function blog_page_body_class( $classes ) {
    $classes[] = ‘blog-page’;
    return $classes;
    }

    add_action(‘genesis_loop’, ‘genesis_standard_loop’, 5);

    genesis();
    [/code]
    But the version on the link has a shortened version. Does it matter? Nevertheless I tried both and nothing worked.

    I noticed that the Genesis parent theme also has a page_blog.php. Would this overwrite the child theme one which I upload?

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Caz

      Thanks for letting me know about the code. I have now updated and tested the code so you can use it now.

      I did have it marked as untested and NO Not Use on the Gist, which only displays when you view the code on Github but must of forgotten to finish testing. Cheers

      P.S Added a screenshot to show you the result below the code.

  5. Dan R. Avatar
    Dan R.

    This is great Brad. The only problem I’m having now, is that the blog page is only pulling in ‘post’ types. I have a CPT called ‘podcast’ that I want all my pages to pull in.

    How would I frame that argument?

    Thanks!

    -Dan

    1. Brad Dalton Avatar
      Brad Dalton

      Try this Dan http://wpsites.net/web-design/add-custom-post-type-pages-to-posts-page/

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.