Tag: Genesis Featured Posts

This archive includes tutorials which contain code enabling you to modify the default functionality used the Genesis featured posts widget or add your own custom version of the Genesis featured posts widget to your child theme with custom functionality.

Categories
Genesis Tutorials

Featured Posts With Pagination In Widget Area Using Business Pro

This coded solution produces a responsive grid of posts in equal height with pagination displayed in the front page 2 section on the front page of the Business Pro child theme for Genesis.

featured posts with pagination in Genesis

You can also display your posts from one or more categories using any of the WP_Query args.

Demo Video

Shows posts with pagination displayed in the 2nd section on the front page of the Business Pro theme for Genesis.

Tested using Business Pro however will work in other Genesis child theme with some modification required.

Installation Steps

There’s 4 steps :

  1. # Upload the front-page.php file to the Business Pro theme folder replacing the default front page template. Code has been added between lines 58 – 64.

    2.  

  2. # Copy & paste the PHP code ( excluding the opening PHP tag ) from the functions.php file to the end of your Business Pro themes functions file.

    3.  

  3. # Copy & paste the CSS from the style.css file to the end of your Business Pro theme style sheet and clear caching. This CSS displays posts in a 3 column grid.

    4.  

  4. # In your WordPress Dashboard, change the Reading settings to Your homepage displays : Your latest posts

    5.  

Download Folder

Show Specific Posts

You can add to or modify any of the parameters in the array of $args using any WP_Query parameters. If you want to show posts from one specific category, you can add this argument to the existing array in functions.php:

'category__in' => 4,

Where 4 is the ID of the posts category you want to display.

Related Tutorials

Categories
Genesis Tutorials

Show Popular Posts By Views Count Using Foodie Pro Featured Posts Widget

By default, the Foodie Pro featured posts widget does NOT include a option to display posts by the number of times a post has been viewed. However, you can add this option to the drop down menu so it does look like this :

Foodie Pro Featured Posts Popular Posts by Views

Note : The views count does not start until you load each post after installing the code.

Installation Steps

There’s 2 steps :

  1. # Upload the folder named featured-posts to the foodiepro > lib > widgets folder like this

    2.  

  2. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of the Foodie Pro themes functions file

    3.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Overlay Title Description OR Caption On Featured Image Hover With Grayscale In Brunch Pro

The code in this tutorial adds a hover overlay to all featured images displayed using the Brunch Pro themes custom Featured Posts widget.

The code also changes the color of all images too black and white as seen in the 3rd image hovered in the following screenshot taken from the testing site.

Grayscale Image Color With Hover Overlay Text

In this example, the Brunch Pro Featured Posts widget is added to the Homepage : Above widget area displaying 3 featured posts in columns.

On mobiles, each entry displays in one single column as seen in the following demo video.

Demo Video

Shows the Brunch Pro themes featured posts widget added to the Home Top widget area.

Displays either the entry title, caption or image description on hover and changes the image color to black and white on hover.

Also displays each post in a single column on smaller screens.

Installation Steps

  1. # Upload the file named display.php to the Brunch Pro themes lib > widgets > featured posts > views folder replacing the default display.php file.

    2.  

    Step 1

  2. # Copy & paste the CSS from the style.css file to the end of the Brunch Pro themes style sheet and clear caching.

    3.  

    Step 2

Download Folder

If you only want to target featured posts in the Homepage : Above widget area, add the .home-top class before the 1st selector for each CSS rule inside the download folders style.css file.

Related Tutorials

Categories
Genesis Tutorials

Add Star Rating To Genesis Featured Posts Widget

The code in this download folder adds an extra setting to the Genesis Featured Posts widget to Show Star Rating for each post.

You can then add a rating from 1 – 5 for each post assigned to the reviews category.

Here’s what it looks like on the front end :

Rating Stars Genesis Featured Posts Widget

The rating is added using custom fields like this :

Custom Fields For Star Rating

You can also add the rating and review system using ACF or gravity forms which enables front end users to submit a rating for review by a administrator.

Demo Video #

Shows a star rating system with Schema added to the Genesis Featured Posts widget enabling users to rate posts assigned to the reviews category.

Tested using the Magazine Pro child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 4 steps :

# Step 1 – Create a new category named Reviews and assign posts to this category which can be star rated as seen in the demo video.

Step 1 - Create Reviews Category

# Step 2 – upload the file named featured-post-reviews-widget.php to your child theme folder.

Step 2 Upload widget file

# Step 3 – Copy ( without the opening PHP tag ) & paste the PHP code from functions.php file to the end of your child themes functions file.

Step 3 Add code to functions file

# Step 4 – Copy & paste the following CSS to the end of your child themes style sheet and clear caching.

Step 4 paste CSS to style sheet

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Genesis Featured Posts Widget Setting To Show or Exclude Sticky Posts

This download folder contains the code which adds a extra setting to the Genesis Featured Posts widget enabling you to either :

  • Only show sticky posts
  • Exclude all sticky posts

Demo Video #

Shows the new setting added to the Genesis Featured Posts widget which enables you to only show sticky posts or exclude sticky posts from displaying when using the widget.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 2 steps :

# Step 1 – Upload the file named sticky-featured-posts-widget.php to your child themes root directory.

# Step 2 – Copy & paste the PHP code from functions.php to the end of your child themes functions file.

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Show Most Popular Posts With The Genesis Featured Posts Widget

This tutorial provides the solution you need to display the most popular posts by number of visits ( views ) using the Genesis featured posts widget, By default, the featured posts widget doesn’t include a setting to show popular posts.

In this tutorial i’ll show you how to add a setting to the Genesis featured posts widget so you can choose to show posts by number of views.

Firstly, here’s the “Views Count” option added to the featured posts widget:

The code adds an extra setting to the options in the orderby drop down menu.

Demo Video #

Shows featured posts displaying in the primary sidebar by order of most views based on how many times the single post loads.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme without modification.

Installation Steps

There’s 2 simple steps:

# Step 1 : Upload the file named popular-featured-posts-widget.php to your child themes root directory.

# Step 2 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions.php file.

You can then drag the widget named Popular Featured Posts into any widget area and select the orderby setting to Views Count as seen in the above screen shot.

Here’s the code for logged in members:

Download Files

Register for full access

Related Posts

Categories
Genesis Tutorials

How To Overlay Title & Featured Image Attachment Details Using Genesis Featured Posts Widget

The code in this download folder enables you to overlay the posts entry title or image caption or image description which is then displayed on image hover when using the Genesis Featured Posts widget.

Overlay Title & Featured Image Attachment Details Using Genesis Featured Posts Widget

Demo Video #

Shows the featured image caption, description or post title displaying on hover when using the Genesis Featured Posts widget.

Tested using Genesis Sample child theme version 3.2 however will work in any Genesis child theme without modification.

Installation Steps #

There’s 3 steps :

Step 1 – Upload the file named title-overlay-featured-posts-widget.php to your child theme folder.

Step 2 – Copy & paste ( without the opening PHP tag ) the PHP code from the functions.php file to the end of your child themes functions file.

Step 3 – Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid

This front page template includes widget areas you can populate with both the Genesis Featured Page and Genesis Featured Posts widgets which will be display in a grid with image hover overlay like this :

Genesis Featured Page Widget Image Hover Overlay

  • The 1st widget area is coded to display featured pages in a 3 column grid with image hover overlay.
  • The 2nd & 3rd widget areas are coded to display featured posts in a 3 column grid with image hover overlay.

Genesis Front Page Grid

By default, the caption is displayed, if added, otherwise the fallback text displayed is the image image description, if added, otherwise the entry title. This is easily changed if needed and support for PHP code modification is included for paid members.

Demo Video #

Shows the featured page and featured post widget entries displaying the featured image with hover overlay text for the entry title, caption or description in a responsive grid.

In this case, only the featured image is shown however the entry title and content can also be included using the widget settings.

Tested using version 3.2 of the Genesis Sample child theme by StudioPress however should work fine in most Genesis child themes.

Installation Steps

There’s 3 steps :

# Step 1 : Upload the files named front_page.php, title-overlay-featured-page-widget.php and title-overlay-featured-post-widget.php to your child themes root directory.

# Step 2 : Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.

# Step 3 : Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

Download Folder

You can add drag in the Genesis Featured Page widgets to the 1st widget area named 1 Featured Pages which are configured, as seen in the demo video, like this :

Genesis Featured Page Widget Settings

The Genesis Featured Posts widget settings are configured like this :

Genesis Featured Page Widget Settings

Related Templates

Categories
Genesis Tutorials

Custom Read More Text For Genesis Featured Posts Widget

By default, the Genesis Featured Posts widget only enables you to display the same read more text for every post displayed in the widget.

In this download folder, you’ll find the code which enables you to add custom read more text for every single post. If none added, the default is displayed as seen in the demo video.

Unique Read More Text For Posts

Demo Video #

Shows unique read more text added to specific posts displayed using the Genesis Featured Posts widget.

Tested using the latest Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps #

There’s 2 steps :

Step 1 – Upload the file named custom-readmore-featured-post-widget.php to your child themes root directory.

Step 2 – Copy & paste the following PHP code to the end of your child themes functions.php file.

Register for full access

Categories
Genesis Tutorials

Custom Featured Image For Genesis Featured Posts Widget

This tutorial provides the code which enables you to add a custom image for each post displayed using the Genesis featured posts widget. By default, the featured posts widget uses the featured image.

If a custom image is added to any single post, the custom image is displayed in the featured posts widget and not the featured image. If no custom image is added, the featured image is used.

Here’s a screenshot showing the same single post ( 1 ) displayed on a archive ( left ) which uses the default featured image and ( 2 ) in the primary sidebar ( right ) which uses the custom image.

Here’s the demo showing how it works.

Demo Video #

The demo video shows you how to follow the 3 steps to install the code, setup and add the custom featured image for use in the Genesis featured posts widget.

Code Functionality

The code enables you to:

  • Use a different/custom featured image in the Genesis featured posts widget.
  • Choose the size and alignment of the custom image using the Genesis featured posts widget settings.
  • Display the default featured image when no custom image added.

Installation Steps #

Installation of the code only requires 3 steps after downloading the zip file below.

Step 1 : Upload the file named custom-featured-post-widget.php to your child themes root directory.

Step 2 : Add the following PHP code to the end of your child themes functions.php file.

include_once( get_stylesheet_directory() . '/featured-posts.php' );

add_action( 'widgets_init', 'custom_featured_posts_image' );
function custom_featured_posts_image() {
    register_widget( 'Featured_Posts' );
}

Step 3 : Install the ACF plugin and create a new field named image like your see in the following ACF settings:

Here’s the code for logged in members:

Download files

Register for full access

Categories
Genesis Tutorials

Link Genesis Featured Posts Widget Featured Image & Title To Custom URL’s

The code in this download folder enables you to change the link for the featured image and title when using the Genesis Featured Posts widget. This way you can link both the image and title to any URL of your choosing.

Demo Video #

Shows the featured image and post title for each entry in the Genesis Featured Posts widget linked to the URL you add using the custom field named featured_image_title. If none added, the title and image link to the single post permalink.

Tested using the Genesis Sample child theme by StudioPress however will work fine in any Genesis child theme.

Installation Steps

There’s 3 steps :

# Step 1 : Upload the file named custom-featured-posts-widget.php to your child theme folder.

Custom Featured Posts Widget File in Child Theme Folder

# Step 2 : Copy & paste the PHP code ( excluding the opening PHP tag ) from the functions.php file to the end of your child themes functions file.

Functions file in child theme directory

# Step 3 : Create a custom field named featured_image_title and add your custom link to the value field like you see in the following screenshot :

Custom field for custom URL

Download Folder

Categories
Genesis Tutorials

Modify The Genesis Featured Custom Post Type Widget

The file in this download folder enables you to modify the code for Genesis Featured Custom Post Type Widget via your child theme.

Genesis Featured Custom Post Type Widget

Once you complete installation, you can then modify the code in the featured-cpt-widget.php file enabling you to modify any of the widgets default functionality including the widget options and widget settings.

You can also add custom functionality to this file.

Demo Video #

Coming Soon!

Installation Steps #

There’s 2 steps :

Step 1 – Upload the file named featured-cpt-widget.php to your child theme folder.

Step 2 – Copy & paste the following PHP code to the end of your child themes functions.php file.

Register for full access

Download folder

Related Tutorials

Categories
Genesis Tutorials

Customize The Post Info In The Genesis Featured Posts Widget

The code in this download folder enables you to modify the default value output for all default parameters included in the Genesis Featured Posts widget.

In this case, the post info shortcodes have been modified so only the post date is displayed regardless of what shortcodes are included in the widgets post info input field.

This means there’s no need to remove any shortcodes from the widget settings.

Only Show Date Genesis Featured Posts Widget

Shows the modified version of the Genesis Featured Posts widget displaying the post date only regardless of how many shortcodes are included in the widgets post info field and regardless of whether the widgets Show Post Info setting is checked or unchecked.

Demo Video #

You can use this code to modify the featured posts widget via the safety of any Genesis child theme and your modifications won’t be removed when Genesis is updated.

You can also use this code to hard code any of the widget settings so any modification to the widget settings will not effect the output so its impossible for users to change the widget settings.

Installation Steps #

There’s 2 steps :

Step 1 – Upload the file named class.Custom_Featured_Posts.php to your child theme folder. Same level as your functions file.

Download Folder

Step 2 – Copy & paste the following PHP code to the end of your child themes functions.php file.

Register for full access

Categories
Genesis Tutorials

Modified Genesis Featured Posts Widget Featured Image & Title Links

This tutorial is based on the following question from a registered user :

I have gone through this tutorial on modifying the functionality of the featured posts widget.

I would like to achieve the following :

  1. Open Genesis Featured Posts Widget Links In New Window
  2. Remove Link from Genesis Featured Posts Titles
  3. Link Genesis Featured Posts Featured Images To Any URL

The file in this download does the following :

  • Removes the link from the entry title in all featured posts
  • Enables you to link any featured image to any URL
  • Opens the post in a new window when the featured image is clicked

Watch the demo video to see exactly how it works.

All modifications relate to entries displayed using the Genesis featured posts widget.

Demo Video

Shows the featured posts widget title link removed so it’s unclickable and the featured image linked to a custom URL.

Works in any Genesis child theme.

Register or login to access the download folder :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Checkerboard Style Featured Content in Genesis

This template includes a widget area which you can use to add any number of Genesis Featured widgets which display page or post content in a mobile responsive checker board style configuration.

The template produces exactly the same result when using Featured Posts or Featured Pages as you can see in the following demo video :

Video Demo

Shows both featured posts and featured page widgets displayed content in a checkerboard style layout on different sized mobile & desktop screen widths.

Similar to the front page widget area in the Atmosphere Pro child theme by StudioPress, this template is coded for integration with the latest version of the Genesis Sample child theme.

Note : CSS modification maybe needed to use this solution in older Genesis child themes.

Login or register to access the files :

Register for full access

Categories
Genesis Tutorials

Add Custom CSS Class To Featured Image In Genesis Featured Posts Widget

This solution enables you to add a custom class to the default class included in the featured image output using the Genesis featured posts widget.

The code enables you to add the class via the safety of any Genesis child theme without modifying the code in Genesis.

In the following example, a class named added-class has been added as you can see in the HTML output :

Code Installation

Add the PHP code from the download folder to the end of your child themes functions file.

Then you can target the featured image like this :

.home-top .featuredpost .added-class {
    border: 5px #F65D52 solid;
}

Register or login to access the download folder :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Conditionally Wrap Genesis Featured Posts Widget Title In Span Tags

This code snippet enables you to add a span class to the Genesis Featured Posts widget title. You can also add the span conditionally so its only added on specific pages or conditionals.

In this case, its only added on the front page.

Here’s the default HTML output showing the h3 tag :

You can see the span tag added in the following screenshot :

You could also wrap the widget title in span tags like this without removing or modifying the default HTML tags :

Register or login to access the code :

Register for full access

Categories
Genesis Tutorials

Reposition Title Before Image In Genesis Featured Posts Widget

This tutorial provides the modification which moves the featured image after the entry title in the Genesis Featured Posts widget.

Tested using the Magazine Pro child theme by StudioPress however will work in any Genesis child theme.

This solution requires the use of the code in this tutorial which enables you to modify the default functionality & markup in the Genesis Featured Posts widget.

Installation

Once you have access to the download folder, follow these 2 steps :

Step 1 : Upload the folder named widgets to your child themes root directory.

Step 2 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

Register or login to access the code in the download folder :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Modify Genesis Featured Posts Widget

This code enables you to customize all the default functionality of the genesis featured post widget.

And, you can customize the widget via the safety of your child theme rather than install a plugin.

Common Modification/Customization Requests

Here are some of the common modifications you can do to the default Genesis featured posts widget using the code from this tutorial :

  • Reposition image after entry title
  • Exclude/Include posts from specific categories
  • Show posts from custom post types
  • Exclude/include specific posts
  • Add custom featured image for featured posts widget only, not archives
  • Add Categories & Tags To Genesis Featured Posts Widget
  • Open Genesis Featured Posts Widget Links In New Window
  • Remove Link from Genesis Featured Posts Titles
  • Link Genesis Featured Posts Featured Images To Any URL

Code Installation

There’s 2 steps :

Step 1 : From the download folder, upload the file named custom-featured-posts-widget.php to your child themes root directory.

Step 2 : From the download folder, copy & paste the PHP code from the functions.php file to the end of your child themes functions.php file.

You can then modify the default functionality of the widget and request support if help needed to do so.

Note : If you want to create a 2nd featured posts widget to modify and keep the default widget, you can use one of these solutions instead.

Register or login to access the download folder :

Register for full access

Related Tutorials

Categories
Free Tutorials Genesis Tutorials

Genesis Popular Posts In Columns

This tutorial provides the CSS & CSS for Media Queries for 2 different solutions which enable you to display popular posts in columns.

You can use a plugin like WordPress Popular Posts or a modified version of the Genesis Featured Posts widget which includes a option to display posts by page views.

Here’s an example of what you get when using the modified version of the Genesis Featured Posts widget :

Here’s an example of what you get when using the WordPress Popular Posts plugin with nil styling :

CSS For Genesis Featured Posts Widget ( Modified )

Use CSS like this ( which supports both CSS Grid & all versions of browsers like MS I.E, Edge & Opera Mini ) to display each entry in a column when using the Genesis Featured Posts Widget ( Modified Version ) :

@supports not (display: grid) {

    .after-entry .entry {
        display: inline-block;
        width: 31%;
        margin: 1.16666666667%;
    }

    @media only screen and (max-width: 960px) {

        .after-entry .entry {
            display: block;
            width: 100%;
        }

    }

}

.after-entry .widget-title {
    grid-area: header;
}

.after-entry .entry:first-of-type {
    grid-area: one;
}

.after-entry .entry:nth-of-type {
    grid-area: two;
}

.after-entry .entry:last-of-type {
    grid-area: three;
}

.after-entry .widget-wrap {   
        display: grid;        
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
            'header header header'
            'one two three';
}

@media only screen and (max-width: 1340px) {

    .after-entry .widget-wrap {        
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'one two'
            'three three';
    }

}

@media only screen and (max-width: 960px) {

    .after-entry .widget-wrap {        
        grid-template-columns: 1fr;
        grid-template-areas:
            'header'
            'one'
            'two'
            'three';
    }

}

Note : Edge will support CSS Grid from the 17/10/2017

The 1st solution also enables you to display posts in columns using the default Genesis featured posts widget with CSS Grid which makes it easy to control the size and order of each popular post.

You can also code your grid areas for each entry or post like this :

.after-entry .entry:nth-of-type(1) {
    grid-area: one;
}

.after-entry .entry:nth-of-type(2) {
    grid-area: two;
}

.after-entry .entry:nth-of-type(3) {
    grid-area: three;
}

CSS For WordPress Popular Posts Plugin

Use this CSS if using the WordPress Popular Posts plugin by Hector C :

.after-entry .popular-posts li {
        float: left;
        clear: none;
        width: 31%;
        margin: 1.16666666667%;
}


@media only screen and (max-width: 680px) {

    .after-entry .popular-posts li {
        float: none;
        width: 100%;
        margin: 0;
    }
    
}

Assumes the use of the After Entry widget in Genesis which uses the .after-entry class.