GBEAVER

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?

Adding Toggle Search Icon at Header Right Widget Area

toggle-search-form

Step : 1

Login to Dashboard, navigate to Appearance -> Widgets page, drag&drop the Text widget in Header Right widget area. Enter this HTML code into textarea and save the widget. Note: FontAwesome icon is using here. Make sure you enabled the FontAwesome from GBeaver -> General Settings section.

 

Step 2:

Open the gbeaver/lib/structure/search.php file and add this PHP codes at end of the file:

 

Step 3:

Open the gbeaver/assets/js/gbeaver-scripts.js file and add the following JS code at line no 79:

 

Step 4:

Lastly open the style.css file and drop the following CSS at end of the file:

Transparent Header with Hero Banner

Transparent Header with Hero Image

Transparent header effect is available on GBeaver 1.0.4. You can add this transparent header effect on any post type (posts, pages or CPTs). See the procedure below to add this header effect:

Step 1: Login to Dashboard and navigate to add/edit WP Editor screen. You may, first, need to enable the WordPress custom fields option for post types like page, post or custom post type page, if it is disabled.

Enable Meta Box

Step 2: Scroll down the page and go to “Custom Fields” section. Click on “Enter new” link, enter “transparent_header” in Name input box and “yes” into Value input box. Click on “Add Custom Field” button and save the meta data. (See the attached image)

Add Meta Data

Click on “Publish” or “Update” button and live the page. Checkout the page on the browser and see the transparent effect.

See the live demo here.

Note: If you are using ACF or any other plugin for custom meta fields on your site, you can also do it using that plugin. Just remember that meta key name would be “transparent_header” and meta value would be “yes”.