• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Genesis Extender Tutorial

Genesis Extender Tutorial

StudioPress theme customisation with the Genesis Extender plugin

If you’re using a StudioPress theme or a theme based on the Genesis Framework, Genesis Extender is a useful add on.

Genesis Extender lets you…

  • Change the look of your theme by editing the CSS styles.
  • Make new page layouts such as magazine style home pages.
  • Make widget areas and hook boxes (content boxes).
  • Use conditional tags to choose which content appears on which post or page.

StudioPress theme customisation

Using the plugin is much easier than writing all this code by hand. And you’re also less likely to damage your site by making typos in your code. Once you’ve made new widget areas, you can add widgets or content to them and then use conditionals to choose which pages or posts your new widget code and content will appear on.

Use Genesis Extender to edit CSS

Genesis >> Extender Custom.

  • First activate the front end CSS builder. Don’t miss the tiny tick box it’s important!
    Custom CSS ( Activate Front-end CSS Builder) TICK THE BOX.
  • Click Save Changes button.
  • Now click – Click To View Front-end (text link).
  • In top right hand of your web page click…
    Show Hide CSS Builder button (it’s blue).
  • Top left of screen, click small Elements button.
  • Click Enable Elements Selectors.
  • Click one of the little blue tabs, e.g. #content.
  • Choose Content Paragraph from the drop down selector.
  • Click the little arrows button, this inserts the CSS selector into the first edit box.
  • Make sure your cursor is inside the curly braces.
  • Close to the very top of the screen, click the Fonts tab.
  • A new dialogue pops up, click the buttons to insert font weight and colour etc. into the editor.
  • When you’re happy with the code, click the button at the bottom of the first text box. Your code is inserted in to the text box beneath it.
  • Look for a Save Changes button near the top right of your screen. Click Save Changes.

Activate front end CSS builder Genesis Extender Plugin

Front end CSS builder Genesis Extender

Add simple Widget Areas using Genesis Extender Plugin for the Genesis Framework

WordPress and Genesis have many ready made widgets that you can drag in to Widget Areas and configure, such as the Genesis Featured Post widget.

We are going to make some custom content in a WordPress post and copy that content into a text widget.

We will make our own widget area to contain this content.

Before you start, go to StudioPress.com and find out if you have an HTML5 theme.

Step One – Make your content

Make your content just like any other page or post you would make. By making the post or page content using WordPress, you don’t have to write the HTML by hand.

Save this as a Draft, don’t publish it. You will copy the HTML using the Text tab in the WordPress post editor and past it into a Text Widget or Hook Box.

Now you have some content to use. By pasting that content into a Text Widget, you can use Genesis Extender to place that content in any position on your web page.

Step Two – Make two widget areas

  • Go to Genesis >> Extender Custom.
  • Select >> Widget Areas.
  • Name: top_left (use under scores)
  • Choose a hook: genesis_before_entry_content (use under scores)
  • Class: one-half first (use hyphens) (You only need first on the first box in a row)

Click the Add button to add a second Widget Area.

  • Name: top_right (use under scores)
  • Choose a hook: genesis_before_entry_content (use under scores)
  • Class: one-half (use hyphens)

Widget area settings Genesis Extender Plugin

 

Now you have content and widget areas.

Drag a text widget into one of your new widget areas, paste the HTML you made on the first step. Your content will display in the position, or on the hook, you chose.

You can now use a conditional tag to choose which pages or post your new widget areas and their content appear on.

StudioPress theme customisation

Conditionals in Genesis Extender

You can target…

  • The Front (or Home) page. is_front_page
  • All single Posts. is_single_post
  • All single Pages. is_page
  • A list (array) of posts or pages. is_single is_single( array( ‘115’, ‘119’ ) )

And much more. So you control what content appears on what post or page.

What we’re going to do…

  1. We already made a widget area in a previous video.
  2. We’ll make a conditional.
  3. In our Genesis Extender Widget Area dialogue, we’ll attach the conditional to our widget area.

In WordPress Dashboard Go to…

  • Genesis >> Extender Custom.
  • Choose Conditionals from top Menu.
  • Click Add button.
  • Examples drop down >> Is Single Post.

You now have a conditional tag available to use. But you need to connect your widget area and conditional tag together.

On the Genesis Extender top menu chose Widget Areas.

  • Find the widget area you want to edit.
  • In the Conditionals drop down box choose the conditional
    you want to use. E.g. is_single_post.
  • Save changes.

Now your Widget Area will appear or not appear depending on the conditions you’ve set.

Conditional tags in Genesis Extender Plugin

Labels – let us attach widget areas we’ve made, to posts and pages, on an individual basis.

  • Dashboard >> Genesis >> Extender Custom.
  • Choose Labels from top menu.
  • Type a name for your new Label.
  • Tick the box…
  • Automatically create a Custom Conditional for this Label.
  • Click Save!

Make a note of what your label is called e.g…
extender_has_label('my-calendar')

  • In the top nav Menu, click Widget Areas.
  • In the Conditionals drop down, choose...
    has_label_my_calendar
  • Save Changes!

Add the Label to any individual Post or Page
(adding the Label will add the widget area and it's contents, a calendar etc. to your page.)

  • Edit an existing post or write a new one.
  • Scroll down and look for a section that says...
  • Genesis Extender Labels.
  • If you have more than one label, find the one you want to use and tick the box.
  • Save your post or page.

Your widget area is displayed only on the posts and pages you chose, by ticking the tick box.

Assigning a label to a hook box or widget area in Genesis Extender

Assigning a label to a page or post in Genesis Extender Plugin

 

Hook Boxes

A Hook Box is similar to a Widget Area but more powerful.

You can assign CSS classes to widget areas. But if you want more control of the area surrounding your widget area, or you want to style a block of widget areas as one unit, you use a Hook Box.

Making a hook box is similar to making a widget area.

In WordPress dashboard, go to…

  • Genesis >> Extender Custom.
  • In the nav bar near the top of the screen, click Hook Boxes.
  • Click the Add button, to add a new Hook Box.
  • Type a name.
  • Choose a hook to hang your Hook Box on.
  • Put your content inside the big text box.
  • Surround your content with a div class so you can use CSS to style the box and it’s content.
  • Save your changes.

You can put several widget areas inside one hook box.

When you make your widget areas, choose short code instead of hooked in the drop down box.

When you make your Hook Box, in the big text box, type the name of your widget area e.g. ad_banner_one.

Put square brackets around the widget area’s name. [ad_banner_one]

Click the, do_shortcode, button.

Genesis Extender will surround the short code in the PHP code needed to run the short code.

By setting several widget areas to short code and wrapping them in one or more CSS classes in your hook box, you can build and style complex layouts.

Styling a hook box in Genesis Extender

 

Don’t forget to add some CSS styling using Genesis Extender to make your Hook Box look the way you want it to.

StudioPress theme customisation

Category: Genesis framework, Web design tips

About Philip Gledhill

Philip helps small and medium service businesses build and maintain clean, minimalist, professional looking websites. He loves clear, concise, customer focused content, and websites that are easy to navigate. His motto is focus on your customer and keep it simple.

Previous Post: « StudioPress themes review – choosing the right theme
Next Post: How to Install the Genesis Framework »

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top