Prosperity: Adding a custom section to the footer area on the blog page

In this article, we are going to show you how to add a custom section to the footer area on the blog page. Let's imagine the following scenario: you need to display the disclaimer section at the bottom of your blog page It can be easily achieved with a custom code snippet.

Note: this solution requires Prosperity version 1.6.0 and up.

We are going to use the Code Snippets plugin for adding a custom snippet to our WordPress site. If you've not installed this plugin yet on your site, please do so. The reason why we are using this plugin is because it's highly not recommended to modify the parent theme files. You should use either a special plugin for it, or a child theme.

Once the plugin is installed and activated on your site, you should see the Snippets link in the main menu section in your Dashboard:

  1. Click on Add New to create a new code snippet.
  2. Add a title for your code snippet. For example, Disclaimer section (Blog page).
  3. In the Code section, add the following code:
    function prosperity_custom_add_footer_section_in_blog() {
      if (!is_home()) {
        return;
      }
      ?>
      
      <div class="blog-footer-disclaimer">
        <div class="container th-content">
          <h3>Disclaimer</h3>
          
          <p>WordPress provides the opportunity for anyone to create and share, from handcrafted personal anecdotes to world-changing movements. People with a limited tech experience can use it “out of the box”, and more tech-savvy folks can customize it in remarkable ways.</p>
        </div>
      </div>
    
      <?php
    }
    add_action( 'prosperity_after_site_content', 'prosperity_custom_add_footer_section_in_blog' );
    	
  4. Below the Code section, you can find a section of options that asks where you want to run your code snippet. In our case, we need to select "Only run on site front-end" option.
  5. Add description of your code snippet, so you know why the code has been added to your site and what it does (optional).
  6. Add tags (optional).
  7. Click "Save Changes" to save your code snippet.

Here is an example of the code snippet:

Now you should see a custom section located at the bottom of your blog page. This section is unstyled because the theme does not come with special styles for your custom sections. You can use this custom CSS to change the styles of your custom section (adjust these values to fit your needs):

/* Disclaimer container */
.blog-footer-disclaimer {
  background-color: #e2e2e2;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Disclaimer title */
.blog-footer-disclaimer h3 {
  font-size: 21px;
  color: #fc393a;
  margin-bottom: 5px;
}

/* Disclaimer text */
.blog-footer-disclaimer {
  font-weight: bold;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.