Tag: GeneratePress

Many of my friends are avid users of the free version of the GeneratePress theme, and they are keen on incorporating some basic customizations into their themes. In this blog post, I’m excited to provide you with a comprehensive guide on this very subject. The time for this exciting transformation is just around the corner!

Similar to our own experience with the free version of GeneratePress, there’s a common desire to display related articles on our blog pages. The good news is, you can achieve this without the need for any plugins or third-party tools. I’ll walk you through the process of seamlessly integrating related articles directly into your theme. The necessary code can be found in this post, making implementation a breeze.

The significance of having related articles for SEO cannot be overstated. When users click on a single blog post and discover related articles on the same page, it greatly enriches their browsing experience. Sure, you can display the latest articles in the sidebar, but our goal is to have the blog page automatically identify related articles based on keywords. In this post, I’ll provide you with the script and a clear explanation of where to integrate it. So, stay tuned for more, my friends.

The accompanying image illustrates how our related articles look with a customized CSS style. I’ve detailed the process of creating and displaying related articles in this visually appealing manner. If you’re eager to add this feature to your GeneratePress free theme, then this blog is tailored just for you. You can access the full source code on our website.

Before we dive into the technical steps, I’ve gone ahead and crafted a child theme for GeneratePress. If you’d like to explore it further, you can take a peek at the live preview and even make a purchase if it piques your interest. Here’s the link to check it out.

Now, let’s get to work. First, you’ll want to copy the code enclosed within the “inside-article relate_post” div class in your blog post. Then, navigate to the theme folder of your GeneratePress theme. Inside this folder, you’ll locate a file named “content-single.php.” Scroll down to the very bottom of that file and paste the aforementioned code snippet.

<div class="inside-article relate_post">
 <h2>Related Articles</h2>
   <div class="entry-content" itemprop="text">
    <ul class="wp-block-latest-posts__list is-grid columns-2 wp-block-latest-posts">
     <?php
       $related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 4, 'post__not_in' => array($post->ID) ) );
     if( $related ) foreach( $related as $post ) {
         setup_postdata($post); ?>
            <li>
             <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
               <?php echo get_the_post_thumbnail(); ?>
            <h3><?php the_title(); ?></h3></a>
          </li>
         <?php }
        wp_reset_postdata(); 
       ?>
   </ul>		
 </div>
</div>

This step essentially involves the copying and pasting of source code into your “content-single.php” file. Once you’ve accomplished that, save the file and refresh the page to ensure the source code harmonizes with the GeneratePress theme.

After confirming that it works, the next step is to append some additional code to your style sheet, “style.css.” Open the file and insert the following CSS code at the bottom or your preferred location:

.relate_post h2{
font-weight: 700;
font-size: 2rem;
color: var(--genPro-black);
}
.relate_post li{

}

.relate_post ul li{
border-bottom: 2px solid #f1f1f1;
height: 19rem;
padding: 0rem;
overflow: hidden; 
}
.relate_post img{
height: 13rem;
object-fit: cover;
}
.relate_post h3{
font-size: 1.2rem;
color: var(--genPro-black);
font-weight: 700;
padding: 0px 1rem;
}
.relate_post ul li:hover{
background: var(--genPro-white);
box-shadow: 0px 8px 20px rgba(94, 86, 70, 0.1);
}

With these actions completed, refresh the page once more. You’ll now witness the Related Articles section appearing right after your blog content, showcasing all the related articles beautifully.

I assure you that the source code provided in this blog will function as intended. My aim is to share personal projects and valuable source code with you, assisting you on your journey.

Also, I have a YouTube channel, and I’ll include the link within this blog. If you find my content helpful, please consider subscribing and supporting me there.

As a freelancer, I specialize in crafting websites, be it for blogging or e-commerce. If you’re in need of a well-designed, fast-loading website, please don’t hesitate to reach out. The contact information is conveniently located on the top right corner of this page. Simply click there, fill out the form, and I’ll get back to you within 1 to 2 hours to address any inquiries or concerns you may have. I’m here to assist, my friends.

Through this blog post, I aim to guide you on how to add custom text or buttons to your GeneratePress theme’s navigation menu bar. When you click, a menu appears, and you can incorporate your custom elements. I’ll show you how to accomplish this, so stay tuned to this blog for the details.

In a straightforward manner, I’ll explain how to insert custom buttons or text in front of the navigation menu of your GeneratePress theme. I’ll also provide visual representations of the code’s appearance. You can easily achieve this by modifying your function.php file, which I’ll describe in this blog post.

I’ve managed and maintained numerous blogs in the past, and I want to assure you that all the code I provide here is thoroughly tested and functional. I create it through my own practice and share it with you through this blog.

So, let’s explore how to add custom text in front of the navigation bar. If you wish to include custom elements like buttons, links, or text, you can do so effortlessly. Below, I’ve provided the necessary code. All you have to do is copy the source code as instructed.

function add_custom_text() {
?>
<span>Text or Button</span>
<?php
}
add_action('generate_before_navigation', 'add_custom_text', 1, 0);

1. Open the theme folder of your GeneratePress.
2. Locate the file named function.php and open it.
3. Scroll to the end of the function.php file and paste the provided code.
4. Customize the text as per your preferences.
5. I’ll illustrate this process with an image in the blog.

After pasting all the provided code, save the file. Then, run it on your server or local host. Refresh the page to ensure that the custom text you added is functioning correctly.

I guarantee that it will work because I thoroughly test everything I share, and there are no coding errors on my end.

Additionally, I have a YouTube channel. You can support me on YouTube by following this link.

That’s all for this blog post. If you found this guide on adding custom text or buttons to GeneratePress helpful, please leave a comment. I’d greatly appreciate it. If you have any questions or need assistance with any project, feel free to contact me. You can find the contact information on the top right side of this page, and I’ll respond within 1-2 hours. Thank you, friends.