• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Riot Customs

Riot Customs

Genesis WordPress Development, Maintenance & Support

  • About
  • Services
  • Blog
  • Shop
  • Contact

Creating New Widget Areas

Written by Katrina

337 shares
  • Facebook331
  • Twitter
  • LinkedIn
  • Tumblr
  • Buffer
  • Email


What are widgets?
WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for Categories, Tag cloud, Search, etc. Plugins will often add their own widgets.

Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly “widgetized” WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure. Widgets require no code experience or expertise.


How do I use widgets?
They can be added, removed, and rearranged on the Theme Customizer or Appearance > Widgets via the Dashboard.
You can do this two ways…


How do I register my own widget area?
This requires some PHP code that you would need to add in your functions.php file.


//* Register widget areas
genesis_register_sidebar( 
    array(
	'id'          => 'new-area',
	'name'        => __( 'New Area', 'child-theme' ),
	'description' => __( 'This is new widget area.', 'child-theme' ),
) );

Congratulations you just registered a new widget area. Now in order to use this on the site, we need to add a hook.
What is a hook?
A hook is your sites structural map, think of it as a guide. This is used on all WordPress sites. However, Genesis has added some additional and unique areas to use.


 Visual Hook Guide


Let’s add a widget area to the very top of the site. In this example, we’re going to use genesis_before_headerand before_header as our hooks as per the visual guide.

Now let’s add some css to that


/* Before Header
--------------------------------------------- */
 .before-header {
 	background-color: #f5f5f5;
	padding-bottom: 20px;
	padding-top: 20px;
}

.before-header img,
.before-header iframe {
	display: block;
	margin: 0 auto;
	text-align: center;
}

Previous Post
Next Post
337 shares
  • Facebook331
  • Twitter
  • LinkedIn
  • Tumblr
  • Buffer
  • Email

GenesisWP, Tutorials Leave a Comment

Reader Interactions

Share Your Thoughts
Cancel reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Maven Theme

Maven Lite

A single page theme using Kadence. A great theme for a simple site to showcase your skills. Grab this free theme today!

Download Now!

Categories

  • Blogging
  • Business
  • Client Work
  • ConvertKit
  • Freebie
  • GenesisWP
  • Interact
  • Personal
  • Theme Releases
  • Theme Updates
  • Tools & Software
  • Tutorials
  • Web Design
  • WordPress

Master ConvertKit

A kick ass tech course on using the ConvertKit software. Want to start growing your list with the best email marketing software out there? What are you waiting for? Grab this course now!

Enroll Now!

Popular Post

change domains dns

How To Change Your Domains DNS

4 Steps to DIY Your Way to A Professional Looking Website

About Lead Your Page + Giveaway

How to Use the Landing Page Template

Buy me a coffee
Newsletter

Tails from the Beast

Join our newsletter for tips on how to use the WordPress platforms. Advance your skills, and most importantly, puppy photos.

Please enter your name.
Please enter a valid email address.
Sign Me Up!

Thanks for subscribing! Please check your email for further instructions.

Something went wrong. Please check your entries and try again.

Development Information

  • How it Works
  • Trusted Partners
  • Portfolio
  • Client Portal

Explore

  • Resources
  • Terms of Service
  • Privacy Policy
  • Disclamier

© 2009 - 2023 Riot Customs, LLC.

Powered by Flywheel & Beaver Builder.