WP SITES

2122

Original Genesis Tutorials & 5000+ Code

Snippets

Header Right

Add & Style Genesis Tabs Widget

Here’s a few tips about how to add the Genesis tabs plugin and style the widget.

There’s 2 steps:

  1. Add a new widget area before the loop on the front page
  2. Style the tabs widget after installing the Genesis Tabs plugin

I used the same class and CSS code for adding the Metro Pro themes after post widget.

Here’s the before:

before style

And after shots:

after style

PHP

Grab this code from the view raw link in the Gist and paste at the end of your child themes functions.php file.

Change the dimensions in the first line of code to match the width and height of the featured images you want displayed in the tabs widget.

CSS

Paste this code at the end of your child themes style.css file before the Media Qeuries.

The widget displays before the loop on the front page however you can easily change the conditional tag is_front_page() to suit your own preferences.

Main navigation