How to add content over the blog posts

Hi there, I would like to have something similar to this over my blog posts (the blue background with the ebook in it with some text).

How can I do that? I only want it above my posts, not in any other pages. Is it possible?

Many thanks in advance.

Hi Stephanie,

Thanks for writing in! Upon checking your referenced site, the following post should help you to implement a similar section on your blog posts (https://theme.co/apex/forum/t/banner-below-icon-navigation-above-content/25235/2?u=mldarshana).

Hope that helps.

Hi, thanks for answering. I donā€™t really understand anything about the childs theme and the functions.php file. According to the link you sent me there is a way to do it without the revolution slider plugin (to prevent my site from slowing down). I have to add a code assuming my child theme is set up. What does it mean to ā€œset up my child themeā€?
I am on my childs theme but my functions.php file is currently empty. Is it normal?

Iā€™ve tried to read about it many times, but I still donā€™t get much about it. Sorry

Hello Stephanie,

Thanks for updating the thread.

Usually, Revolution slider plugin wonā€™t slow down the speed of your website. If you are on a hosting website with a good and fast server then in normal situation there should not be any issues with the speed of the website.

Basically, you need to install and activate child theme to get started with making the changes. In the link that my colleague has shared contains tutorial link to getting started with child theme. I am sharing the same here.

Yes, by default Themeco child theme function.php file is blank.

I have recorded a screencast that will help you to get started with child theme.

Thanks.

1 Like

I read on quite a few articles that the fewer plugin you have the better. Too many plugins can slow down the website loading speed. My hosting service is Bluehost. I noticed a decrease in my site speed when I had more plugins. Thatā€™s why I try to do mostly everything that is achievable with Css now. Is it possible to do it with css? Again, I looked up the post of your colleague and I donā€™t really understand the code he is using.

Hi Stephanie,

Donā€™t worry. One slider plugin per website is fine.

Not possible.

Could you please tell us with code?

Thank you.

Hi thai, thank you for answering. I cannot paste the code correctly (donā€™t know why) but it is on this forum post (what I can paste of the code will be below):

This is the code I was referring to:

// Add a custom blog header image
// =============================================================================
add_action(ā€˜x_before_view_integrity__landmark-headerā€™, ā€˜custom_blog_header01ā€™);

function custom_blog_header01(){ ?>
<?php if (is_single()) : ?>

	<!-- Place the following line at the location you wish to display the form on your page. -->
	<div data-origin="https://partners.skydreams.com"
	data-authcode="##########"
	data-sd-iframe="b2c" data-version="3"></div>

<?php endif; ?>
<?php } function add_customblog_headr_script(){ ?>
<!-- Place the following line near the bottom of the page, right
before the </body> tag. -->
<script type="text/javascript"
src="https://partners.skydreams.com/bundles/sdaffiliate/min/js/iframe.js"
async="async"></script>   
<?php } add_action('wp_footer', 'add_customblog_headr_script'); // =============================================================================

Hi Stephanie,

Please disregard that code. To add banner to your blogposts page without using extra plugin, follow instructions below.

  1. Create the your banner using Global blocks exactly the way you want it.
  1. Add the code below in your child themeā€™s functions.php
// Add a custom blog header image
// =============================================================================

add_action('x_before_view_global__slider-below', 'custom_blog_header01');

function custom_blog_header01(){
    if (is_single()) {
      echo do_shortcode('[cs_gb id=51]');
    }
}

You may add it after this line in functions.php

// Additional Functions
// =============================================================================

[cs_gb id=51] is the shortcode of your global block. You need to change it with your own. You will be able to find it in Global Blocks Homepage

Hope this helps.

1 Like

Wow this is great! Thank you so much! Exactly what I wanted :smiley:

Youā€™re most welcome, Stephanie!

Hello Paul, I followed your instructions and created the Custom Header section in a Global Block and added the .php script to the child theme. It works for a blog article page, however is there a way I can put a Custom Header - Global Block on the Blog section home page?
Iā€™m currently developing a website for a client and Iā€™m using a password protected directory (summary content below)

Currently the header section says ā€œDigestive Health - A little information for you with your digestive health in mind.ā€
I just want to add the Global block header in place of that text header. You can see the Global block header if you click on one of the post.
Please advise of any help you can offer.

Hello Scott,

Thanks for updating this thread. To display the global block in the blog index, please have the code updated and use this:

add_action('x_before_view_global__slider-below', 'custom_blog_header01');
function custom_blog_header01(){
	if (	is_single() || is_home() ) {
		echo do_shortcode('[cs_gb id=123]');
	}
}

Please do not forget to change the global block shortcode.

Hope this helps. Kindly let us know.

Wonderful & Perfect, thank you for the help!!!

Much Aprreciated! :grinning:

Youā€™re most welcome!
Thanks for letting us know that it has worked for you.

I currently use global blocks and it works great! However it doesnā€™t appear on mobile. I use WPtouch plugin to display my site on mobile and tablets. Any ideas how I can make my banner appear on my blog posts on mobile?

Hello Stephanie,

WPtouch plugin may have overridden the layout which is why it is not displaying the banner. This plugin may have some caching too. You might need to clear the cache and test again.

Temporarily disable this plugin and test the site. If the banner is displaying, then this plugin is causing it for sure.

Please let us know how it goes.

Yes the plugin is causing it but is there ANY way to include my banner on mobile and to keep wptouch? All my website on mobile is supported by that plugin. If I deactivate it,my site is no longer mobile friendly. Is there a css code I could use?

Hello There,

Even using the css code, you will need the banner structure which was removed by the plugin. Please contact the creators of WP Touch plugin instead. They should be able to give you a more detailed instruction on how to alter the plugin out and be able to add a banner in smaller screens.

Thank you for your understanding.

1 Like

I understand. Thank you all for your time

Youā€™re most welcome!