• 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 / Advanced / Genesis Framework widget areas (how to add them)

Genesis Framework widget areas (how to add them)

Be careful when adding Genesis framework widget areas.

If you damage a PHP file your website will stop working and all you will be able to see is a white screen. So you need to access, replace or repair your PHP files using FTP.

Do not try edit any PHP files until you can use FTP to backup, repair and replace any files you may damage.

Adding Genesis Framework widget areas the easy way

This post was originally based on a code snippet provided by Brian Gardner. Brian has since redesigned his site, however you can use the code below. To find more code snippets by Brian visit his code snippets page.
http://my.studiopress.com/snippets/

Don’t try use this code in the eleven40 StudioPress theme.You can not use this exact code with the eleven40 StudioPress theme. It’s already built into that theme. If you try add the code again to the eleven40 theme your site will stop working!You can not re-declare a function that is already in use.

There are two pieces of PHP code and one piece of CSS code.

Paste both pieces of PHP code into your StudioPress theme’s functions.php file.

Paste the CSS code into your StudioPress theme’s style.css file.

You can find the code editor in your WordPress dashboard…

Dashboard > Appearance > Editor.
On the right hand side of your screen look for Theme Functions functions.php
and..
Styles Stylesheet style.css.

We’re using the code displayed below, put the PHP code in functins.php and the style sheet code in style.css.

Save your chages.


This code originally  came from Brian Gardner’s website, it should look something like this…

The PHP code. Place this in your StudioPress theme’s functions.php file…

Please Note, there is a slight difference between Brian’s original code for older themes and the code needed for new HTML5 themes. Use the second block of code for HTML5 themes.

Code for older themes

Extra div for html5 themes

Code for HTML5 themes

The CSS code. Place this in your  your StudioPress theme’s theme’s style.css file……
(Same on old and new themes)


 

Editing functions php when editing Genesis framework widget areas

Pasting the php code Paste the css code After you’ve pasted both pieces of PHP code into the bottom of your  your StudioPress theme’s functions.php file. Making sure you get them in the right order. And you’ve pasted the CSS into your  your StudioPress theme’s style.css file… In your WordPress dashboard, go to Appearance > Widgets. Appearance widgets Click the down arrow to open the widget called Welcome Text. Drag a text widget in to this widget area. Drag the text widget into the widget area Type a message that you want to appear on every page of your site. Click save. You now have a new widget area at the top of all pages and posts on your site. You can use it to display text, images or a slider etc. If you use this widget area to display a slider or any widget other than the text widget, you may want to edit the css to achieve a look that suits your site’s design.

If you want to only display your widget and it’s content on your home page you need to use some conditional code.

Go to… Dashboard > Appearance > Editor. On the right hand side of your screen look for Theme Functions functions.php Find the widget area code we added to the site and type some conditional code just before where it says genesis_widget_area.Conditional tag for Genesis widget area Save your file and check that your widget only appears on the front page of the site. If you want to choose where on your page the widget appears, top, bottom, left or right etc. you will need to change the hook the that is used in the code. Go to genesis tutorials .com and find the visual hook guide page. http://genesistutorials.com/visual-hook-guide/ Look through all of the available hooks and find a hook that is in the position you want to place your content. Copy the hook name. Open Your theme’s functions.php file. Dashboard > Appearance > Editor. On the right hand side of your screen look for Theme Functions functions.php Find the part of the code that says add_action…

The code in single quotes that comes after add_action( is the hook.

By changing the name of the hook you will move the widget area to a different part of your web page.

Genesis hook code in widget area.

That’s it.
You’re well on your way to being a Genesis Framework widget area, and StudioPress super hero!

Category: Advanced, Genesis framework, Web design tipsTag: Advanced tips and third party plugins

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: « Firebug – editing WordPress CSS
Next Post: Genesis Grid Loop Tutorial »

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