Section between post carousel and blog index

[Veerman]

Hello,

I purchased X-Theme and currently use stack Ethos. I would like to add a section (intro) in-between the post carousel and the blog index on the homepage.

Could you please share with me the easiest way to do this?

Thank you very much,
F

[ruenel]

Hey Ferdy,

Thanks for writing in!

Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Add custom content
// =============================================================================
function add_custom_content(){ ?>
    
    <div class="x-container max width custom-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.</p>
    </div>

<?php }
add_action('x_before_view_global__slider-below', 'add_custom_content');
// =============================================================================

Feel free to add your custom content in the designated area.

[Veerman]

Hey RueNel,

Thank you very much for your reply. It worked, however, the text is now also being shown on my other pages and I only want it to be showed on my blog index/blog page. Can is change this with some code too? I do have two more questions now; hope you can help me:

1- Can I create more void/white space between the text and the carousel?
2- Is it possible to customise the text size and font?

Happy weekend!

Best,
Ferdy

[ruenel]

Hello Ferdy,

Please have the code updated so that it will only display in your blog index and single posts:

// Add custom content
// =============================================================================
function add_custom_content(){ ?>
    
  <?php if ( is_home() || is_single() ) : ?>  

    <div class="x-container max width custom-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.</p>
    </div>

  <?php endif; ?>

<?php }
add_action('x_before_view_global__slider-below', 'add_custom_content');
// =============================================================================

1.) To create more white space between the text and carousel, you can use the custom css below.

2.) To customize the text size and font, see the custom css below:

.custom-content {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.3em;
  font-family: Arial, serif;
}

Hope this helps. Kindly let us know how it goes.

[Veerman]

Hi RueNel,

Thanks again for your help.

I updated the code and the text did indeed disappear on the other pages of my website but it is still being shown on the page when one clicks on a specific blog post, above the post itself. Can I change the code so that this introduction text is only visible on the homepage and not above every post too?

I was also able to change the typeface and size - thanks for that. Is there also a way to centre the text and give it another colour?

Your help is much appreciated!

All the best,
Ferdy

[ruenel]

Hello Ferdy,

The code I gave is specifically targeted to display in your blog index and single blog posts. If you only need it to display in the blog index, please have it updated again and use this:

// Add custom content
// =============================================================================
function add_custom_content(){ ?>
    
  <?php if ( is_home() ) : ?>  

    <div class="x-container max width custom-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.</p>
    </div>

  <?php endif; ?>

<?php }
add_action('x_before_view_global__slider-below', 'add_custom_content');
// =============================================================================

What has changed? It is the condition statement; from <?php if ( is_home() || is_single() ) : ?> to just <?php if ( is_home() ) : ?>

To center the text, you may update the css code and use this?

.custom-content {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.3em;
  font-family: Arial, serif;
  text-align: center;
}

Regards.

[Veerman]

Awesome, it worked!

Thanks so much @RueNel

[friech]

You’re most welcome,

Cheers!