• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Digimanx

Blog for learning by doing

  • Resources
    • Start A Blog
    • DIY PC Build
    • Hackintosh
    • Make money online
  • Computers
    • Mac OS
    • Windows
    • Software
    • Internet stuff
  • Hobies
    • Guitar
    • Home Recording
  • Blog & Lifestyle
    • WordPress
    • Genesis Themes
    • Affiliate Marketing
    • Monetize your blog
    • Best blogging tips!
  • About

Hermansyah Filani / May 25, 2019

Create Below Header Widget In Genesis Themes

Below Header Widget In Genesis

Need to create below header widget in Genesis themes? Here you can learn to create your own. It’s very useful for placing ads, banner, etc.

In this tutorial, we also register the widget to WordPress Customizer. So, it will be easy for you to place ‘anything’ you want on it.

[Note!] This tutorial is meant for Genesis themes only. If you use other themes than Genesis, then it will not work. If you want to switch your theme to Genesis, to get one go here: Get StudioPress Theme

Okay, here’s how to create below header widget on Genesis.

Adding PHP code to create below header widget in Genesis themes

First, you need to add the PHP code below to the bottom of your WP Themes Functions. To do that, from your WP Admin dashboard, go to Appearance > Theme Editor > Themes Functions.

The PHP code above will place the widget in Posts page and Blog page only.

Register the widget

Next, you’ll need to register the widget. So you can easily customize it in WordPress Live Customizer. Copy and paste PHP code below, also in your Themes Functions.

Styling the widget

The last step, you will need to style the widget. Depend on how the design of your theme the CSS code below may not look good on your site. So you’ll need to tweak it to match with your site design. This is the reference CSS code:

Done

And finish! if the style CSS has no problem with your child theme that you use. Then this is it.

But like I mentioned before if you are using a custom design with the Genesis Sample. Or use it as a custom banner, CTA whatever. Then you will need to tweak the CSS code.

The CSS code above is exactly what I use for this site. So, you got the idea what best for your site. The padding, background color, etc.

Hope this post useful for your reference on how to create below header widget in Genesis Themes.

RELATED CONTENT

Filed Under: Blogging, WordPress Tagged With: code, Coding, Genesis, Wordpress

Hermansyah Filani

Twitter | Instagram
An independent blogger who love drawings and paintings. Writing blog for sharing and learning. Learn more

From Amazon Associates

Reader Interactions

Leave a Reply Cancel reply

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

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

Primary Sidebar

Stay Connect

Recent posts

  • Ventura

    Read this before upgrading your Hackintosh to macOS Ventura


  • usb wifi adapter

    Easy Solution for Wifi not working on macOS


  • Monterey USB Installer

    How to Make macOS Monterey USB Installer on Windows PC Easily!


  • UEFI BIOS

    Setting UEFI BIOS on “old” Motherboard for Hackintosh


  • Change macOS Terminal Default Themes

    How to Change macOS Terminal Default Themes


  • I need to:

    • Start a blog
    • Build a PC
    • Make a Hackintosh
    • Learn Home Recording
    • Learn basic web coding

    Subscribe

    Newsletter

    Get Newsletters via Email for free.

    Get new posts by email:
    Powered by follow.it

    Footer

    Pages

    • Blog
    • About
    • Contact
    • Guest Blogging
    • Affiliate Disclaimer

    Affiliates Disclosure

    ‘Some of posts on this site is contain affiliate links. Which mean, if you purchase products or services that we recommended, we will receive affiliate commission. It will not charge you for any additional fees. Learn more

    Follow us:

    © Copyright 2020 Digimanx.com. All Rights Reserved.

    Disclaimer . Privacy policy . Term and conditions . Sitemap

     

    Loading Comments...
     

      pixel