GeneratePress is a popular WordPress theme known for its versatility and lean, performance-optimized structure. While there are many plugins available that can add social media share buttons to your posts, sometimes you might want to avoid adding more plugins to keep your site’s bloat to a minimum. In this tutorial, I’ll walk you through the process of adding share buttons to your GeneratePress theme without using a plugin.
This method gives you greater control over the design and functionality of your share buttons and can have a positive impact on your site speed by reducing the number of scripts running on your pages.
Prepare Your Theme Files
Before you start, it’s a good practice to make a backup of your theme files. You can do this by using an FTP client to download your site’s theme folder, or you can use a file manager tool if it is provided by your hosting service. Once you have a backup, you can proceed with the following steps:
Step 1: Create a Share Buttons Template
First, you’ll create a new PHP file for your share buttons. This file will hold the HTML and PHP code necessary to display the share buttons. In your child theme’s directory, create a new file called `content-share.php`. This template will be included in your single post content to display the share buttons.
Here’s a basic structure to start with:
php
<?PHP
// Get the share URL.PHP
$share_url = urlencode(get_permalink());
?>
<div class="share-buttons">
Share this:
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>" target="_blank">Facebook</a>
<a href="https://twitter.com/intent/tweet?url=<?php echo $share_url; ?>" target="_blank">Twitter</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $share_url; ?>" target="_blank">LinkedIn</a>
</div>This template provides share links for Facebook, Twitter, and LinkedIn. You can add more platforms as needed by duplicating the `<a>` tag for each platform and their respective share URLs.
Step 2: Link the Share Buttons Template
Next, we need to link our new `content-share.php` template to the GeneratePress post format. Open your `functions.php` file in your child theme directory and place the following code inside:
php
add_action( 'after_setup_theme', 'generatepress_child_theme_setup' );
if ( ! function_exists( 'generatepress_child_theme_setup' ) ) :
function generatepress_child_theme_setup() {
add_filter( 'generate_header_entry_meta_items', 'gp_share_content' );
function gp_share_content( $items ) {
if ( is_single() ) {
$new_content = array( 'content-share-new' => 'content-share' );
$items = array_merge( $items, $new_content );
}
return $items;
}
}
endif;This code tells WordPress that whenever we are on a single post, we want to display the content-share template right after the entry header.
However, included directly in the `functions.php` could be cluttered and not very lean for options. A better approach could be to enqueue the new template using conditional logic.
Step 3 (Optional): Enqueue the New Template
You can also choose to enqueue the new template only when certain conditions are met. You can do this by adding custom enqueue scripts using hooks provided by GeneratePress.
Here’s an example of how to display the share buttons only on posts and not on pages:
php
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
function generatepress_child_enqueue_scripts() {
if ( is_single() ) {
wp_enqueue_style( 'gp-share-buttons', get_stylesheet_directory_uri() . '/path-to-your-share-button-styles.css', array(), '1.0' );
wp_enqueue_script( 'gp-share-buttons', get_stylesheet_directory_uri() . '/path-to-your-share-button-scripts.js', array(), '1.0' );
}
}Style Your Share Buttons
Once the share buttons function properly, you’ll need to style them to match your site’s design. Create a new file in your child theme called `share-button-styles.css` and link it to your share button template using the code we described earlier.
Your share buttons should be clearly visible and fit with the overall design and color scheme of your site. Here’s a simple example of how to style the share buttons:
css
.share-buttons {
margin-top: 20px;
}
.share-buttons a {
display: inline-block;
margin-right: 10px;
background-color: #007bff;
color: white;
padding: 8px 12px;
border-radius: 4px;
text-decoration: none;
}
.share-buttons a:hover {
background-color: #0056b3;
}This CSS will provide a basic style to your share buttons. You can further customize these styles to match your site’s theme properly.
Finalizing and Testing
After you have created and styled your share buttons, it’s time to test them. Navigate to a single post on your site, and you should see the new share buttons displaying below the entry header.
Click on each button to ensure that they share the correct post URL when activated. You can use a different browser or an incognito window to verify that shares show correctly on social media platforms.
If everything is working as expected, your share buttons are now live on your site’s single post pages!
By following these steps, you have successfully added share buttons to your GeneratePress theme without using a plugin. This approach offers you more control over the functionality and design of your share buttons, and it keeps your site leaner by minimizing the number of plugins you use. Remember to always back up your files and test any changes in a staging environment before applying them to your live site.