In my Facebook group a user asked:
Hi Sridhar! Do you have an idea how to accomplish something like the three featured images at the top of this site that have the tabs for featured, popular etc? http://www.gimmesomeoven.com/ Thanks!
The referenced site uses Hello Ajax Tabs WordPress Widget plugin for displaying widgets in tabs.
In this tutorial's implementation though, we shall load jQuery UI which WordPress comes with for displaying widgets placed in three widget areas as tabs in the front-end on the front page in Genesis with post titles overlayed near the bottom on top of featured images.
Screencast:
Screenshot:
For Featured Posts we shall display 3 most recent Posts from a specific Featured category using the Flexible Posts widget plugin's widget.
For Popular Posts we shall use WordPress Popular Posts plugin's widget to display 3 most viewed Posts.
For Latest Posts, we shall use another Flexible Posts widget to display 3 most recent Posts.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Add the following in child theme's functions.php:
Thank you for this! Do you know how to also add the categories post meta with and icon for each category just under the title as seen in the gimmesomeoven site? I know you can add the category post info via the widget, but how do you assign a different icon for each category?
Can be done for posts in Featured and Latest tabs with some coding: http://d.pr/i/1amit
But not straight forward to do for posts in Popular tab. I’ve asked about this in the plugin’s forum here: https://wordpress.org/support/topic/how-do-i-add-a-custom-content-tag-for-use-in-post_html
Let’s wait for the reply..
Okay. Thank you.
I have updated the tutorial with the solution.
Follow Update 1.
I have this working functionally, below the other home page widget areas in Brunch Pro, but can’t figure out why the CSS is being ignored. Can you have a look if you have a second?
http://thecrumbykitchen.triplelattedesign.com/thecrumbykitchen/
If you need any files or other info, please let me know.
Thanks for your time!
Charissa
Closing brace for 420px media query is missing.
https://sridharkatakam.com/bdn-test/
Thanks for taking a look and for the link re troubleshooting…still new to much of this.
Hi,
How would I move the tab titles to the top of the tabbed images as in the media queries?
Thanks!