Tag: Tabs

Single Posts In Tabs Using Genesis

Post author By Brad Dalton
Post date August 24, 2017
No Comments on Single Posts In Tabs Using Genesis

The code in this tutorial enables you to create tabs ( using code, not plugin ) which display the entry title, featured image and content limit. You can also add a custom image in replace of the featured image, If no custom image added, the featured image will be used.

The tutorial is written based on the following question :

Is there any way to force Genesis Tabs (or Genesis Tabs Extended) plugin to use a picture other than “featured image”? I use Genesis News Pro theme and need to promote a few articles. I tried different sliders, but none of them looks as good as Genesis Tabs…

Here’s the demo video.

Watch Demo Video #

Shows how the featured image is displayed unless a custom is added to the post via a custom field name tab_image. Also shows how you can control how many rows of menu items are displayed at specific screen widths using media queries with CSS Grid.

Options

You can display single posts, pages and custom post types by post ID.

Code Installation #

There’s 3 files in the download folder.

Step 1 : Copy the PHP code from the functions.php file in the download folder to the end of your child themes functions.php file.

Step 2 : Copy the CSS from the style.css file in the download folder to the end of your child themes style.css file. Clear caching.

Here’s the download folder for logged in members:

Tags Minimum Pro Theme, Tabs

Genesis Tutorials

Display Single Posts In Tabs

Post author By Brad Dalton
Post date April 9, 2017
No Comments on Display Single Posts In Tabs

This code enables you to hook in any number of tabs containing selected posts by post id. The code includes a comma separated list of post id’s which you can easily edit with your own choices.

You can also add a unique menu title for each post thats different to the entry title, ass seen in the above screenshot.

The code also enables you to modify the:

featured image size
featured image alignment
use any of the WP_Query parameters

By default, each tab contains the entry title, featured image and content which is limited in the code which you can easily modify.

Here’s the demo video

Demo Video

The demo video shows 8 selected posts each displayed in a tab with a custom menu title that is different to the single posts entry title.

The code includes the is_front_page() conditional tag so it only loads on the front page. Remove or modify this conditional tag for use on other pages.

Here’s the code for logged in members:

Genesis Tabs Widget You Can Fully Customize

Post author By Brad Dalton
Post date April 8, 2017
No Comments on Genesis Tabs Widget You Can Fully Customize

The code in this tutorial enables you to add a tabs widget directly to your Genesis child theme folder. This way you modify both the functionality of the tabs widget as well as the styling via the safety of your child theme.

The code includes a WP_Query which you can modify using any of the huge range of parameters the WP_Query class includes rather than be limited to displaying the latest post from each category.

The tabs widget enables you to display the featured image, title, excerpt or content limit in each tab. You can also modify the WP_Query parameters to:

Include or exclude posts from being displayed in each category tab.
Display posts from a specific custom post type or multiple custom post types.
Use the orderby parameters to control the order in which posts are displayed in each category tab

Here’s the code and simple 2 step installation instructions for the tabs widget which you can add directly to your child theme folder.

Add Tabs in Genesis Child Themes

Post author By Brad Dalton
Post date December 15, 2015
2 Comments on Add Tabs in Genesis Child Themes

This code enables you to add tabs anywhere in any theme.

Here’s the result with basic styling:

Once you install the code, all you need to do is paste in the HTML for your tabs.

The above demo was generated by pasting the tabs HTML into a single post.

You can add the HTML in your editor on any Edit Post or Page screen, text widget or hook it in using PHP code.

There’s 4 types of code used to create tabs in WordPress :

jQuery
PHP
CSS
HTML

Code Installation – From Download Folder #

There’s 3 steps involved to use the tabs code :

Copy the tabs folder and paste it into your child themes root directory.
Copy the PHP code from the functions.php file and paste it into your child themes functions file.
Paste the HTML for the tabs anywhere in your theme you want to display your tabs.

Here’s the code for logged in members :

HTML

Once you install the code, paste the HTML into any Edit Post/Page or text widget like this.

You can also hook in the HTML using a custom function.

Genesis Tabs Template With Custom Fields

Post author By Brad Dalton
Post date May 5, 2015
No Comments on Genesis Tabs Template With Custom Fields

This page template enables you to add content via the native WordPress custom fields meta boxes located on every Edit Page.

Setup Instructions

Using a code editor, create a new file named tab_fields.php and add the large block of PHP code below to the file.
Add the jQuery near the end of this post to a file in your child themes js folder.
Upload the file to your child themes root directory.
You can then select the template named Tabbed Fields from the drop menu under the Page Attributes box located on every Edit Page screen.
Add a custom field for each tab using the field names you see in the above image and then add content to each value field.