Categories
Genesis Tutorials

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:

Categories
Genesis Tutorials

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:

Related Tutorials

Categories
Genesis Tutorials

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.

Related Tutorials

Categories
Genesis Tutorials

Add Tabs in Genesis Child Themes

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

Here’s the result with basic styling:

tabs

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 :

  1. Copy the tabs folder and paste it into your child themes root directory.
  2. Copy the PHP code from the functions.php file and paste it into your child themes functions file.
  3. 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.

tabs-html

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

Related Tutorials

Categories
Genesis Tutorials

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.

custom-fields

Setup Instructions

  1. Using a code editor, create a new file named tab_fields.php and add the large block of PHP code below to the file.
  2. Add the jQuery near the end of this post to a file in your child themes js folder.
  3. Upload the file to your child themes root directory.
  4. You can then select the template named Tabbed Fields from the drop menu under the Page Attributes box located on every Edit Page screen.
  5. 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.

Template Code

Related Templates

Categories
Genesis Tutorials

Genesis Tabbed Widgets Template

This page template includes 5 widgets areas which only display when populated with any type of content.

If you want to use this template on multiple pages with unique content you can swap out the widget code for custom fields code.

In 3 simple steps we’ll create the new page template which you can select from the Page Attributes box on any Page Edit screen.

Related Tutorials

Categories
Genesis Tutorials

Genesis Tabbed Content Template

This tutorial provides code for adding tabs in a page.

tabs

The template enables you to show and hide content simply by clicking each menu item.

Video Demo

Installation & Setup Instructions

Simply upload the file to your child themes root directory and select the template from the Page Attributes box on any Edit Page screen.

Then you can add the HTML with your own content directly into your editor.

You can use this template with the full screen layout or any other layout like content sidebar.

You can also use this template on as many pages as you like.

There’s 3 simple steps involved.

Related Tutorials