Genesis

Implementing Headroom JS into GBeaver Theme

What is Headroom.js?

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

Source – http://wicky.nillia.ms/headroom.js/

 

METHOD 1

Follow the instructions at below If you are directly editing the gbeaver folder’s files.

Step 1: Enabling the Sticky Header option

Login to your dashboard, navigate to GBeaver -> Theme Options page and expand the General Settings section. Turn on the “ENABLE STICKY SITE HEADER?” option.

Step 2: Download/Upload Headroom.js file

Download the Headroom.js and jQuery.headrom.js file from Github and upload into gbeaver/assets/js folder.

Step 3: Adding Custom PHP snippet

Open the functions.php file and add this snippet at end of the file

Step 4: Adding Custom CSS

Open the style.css file and add this CSS

 



METHOD 2

If you are using the skin logic of GBeaver theme as per this instructions, then you will follow the instructions below:

Step 1: Enabling the Sticky Header option

Login to your dashboard, navigate to GBeaver -> Theme Options page and expand the General Settings section. Turn on the “ENABLE STICKY SITE HEADER?” option.

Step 2: Download/Upload Headroom.js file

Download the Headroom.js and jQuery.headrom.js file from Github and upload into customize-gbeaver/js folder (you will create this folder).

Step 3: Adding Custom PHP snippet

Open the custom-functions.php file and add this snippet at end of the file

Step 4: Adding Custom CSS

Open your custom CSS file and add this new CSS there

 

How do you create site header using Beaver Builder on Genesis Framework?

These days Beaver Page Builder plugin is very popular tools for web development work. This plugin is also compatible with Genesis Framework and you can quickly develop a site. So I’m replacing the default Genesis child theme header with custom one using Beaver Builder plugin.

Step 1: Creating a template

  • Login to Dashboard
  • Navigate to Settings->Page Builder and enable the “Template” feature
  • Navigate to Builder -> Templates and create a new template
  • Publish the template

Step 2: Add a simple snippet

Open the functions.php file of your child theme and add this small snippet at end of the file.

 

How do you create the widgetized home page?

Make sure that you already created the customize-gbeaver folder inside the wp-content folder and put the custom-functions.php file into customize-gbeaver folder. See the instruction at below:

Step 1: Creating widget areas for Home page. Open the custom-functions.php file and add the following PHP code at end of the file:

Front Page Widget Areas

Step 2: Adding widgets into widget areas based on site requirements.

  1. Navigate to Appearance -> Widgets
  2. Drag&Drop the widget into Front Page widget areas

Step 3: Creating new file page_wdgt_home.php and put into customize-gbeaver folder. Now add the following snippets:

Step 4: Creating a page and setting as static front page.

  1. Navigate to Pages -> Add New
  2. Enter Title
  3. Select “Widgetized Home” from Page Attributes -> Templates drop down
  4. Select “Full Width” Genesis Layout
  5. Enter unique class name for home page into Custom Body Class input box. So you can add CSS for home page only (if require)
  6. Hit on Publish button
  7. Navigate to Settings -> Reading page
  8. Select “A static page (select below)” radio button
  9. Select your home page from Front page: drop down list

You will add the CSS based on your site design.

How do you call the style.css file from outside of your child theme?

We knew that child themes are updating periodically. So you are fetching the lot of troubles when you are updating the theme. You can easily overcome this hassle using the latest version (2.0+) of GBeaver Theme.

Here is the full procedure:

Step 1: Create a folder “customize-gbeaver” and put into wp-content folder. Now copy the style.css file from themes/gbeaver folder and put into “customize-gbeaver” folder.

Step 2: Create a new PHP file “custom-functions.php” and put into “customize-gbeaver” folder. Open this file and add the following snippets:

Step 3: Open the style.css file from customize-gbeaver folder and feel free add new css or edit/delete the existing CSS code. You can also optimize this CSS file by removing the unwanted CSS codes.

Therefore you will not loss any custom codes when new version will release.

Notes: Follow this guideline who is already creating the site(s) with very old version.

How do you add shrink effect on your site header?

One of my GBeaver theme’s customer asked this effect. I am sharing the tips here. So it will help my other customers also.

Step 1: Login to Dashboard and go to GBeaver Theme options page. Expand the General Settings section and enable the “Sticky Header” effect.

Step 2: Open the style.css file and add this new CSS

Step 3: Create a new JS file “shrink-header.js” and put into assets/js folder. Here is the full code of this JS file:

Step 4: Open the functions.php file and add this PHP code

Make the menu sticky on mobile devices

Original request was

Sticky Menu Query

Please follow the steps at below:

Step 1: Open the style.css file on Notepad+ or any other editor, go to media queries section (my end line no 2890-2893) and remove the following CSS:

Step 2: Go to gbeaver/assets/js folder and open the gbeaver-scripts.js file. Now replace this existing code

WITH

How to remove sidebar on category pages only?

Genesis is providing the layout setting section on edit category page. You will go to edit category page, choose the “full width” layout and save the category settings. It is very easy job if you have 3-4 categories. But your site have 10, 20 or more categories then it would be very pain full work. I found the quick solution about it. Open your functions.php file and add this snippets at end of the file

Above code will only work for category pages. is_category() function is checking that user is on category archive page. Next line is adding the full width layout and removing the sidebar(s).

Pretty simple code. is it not?