How to Change Beaver Builder Social Icon Style

Beaver Builder has been a great tool that most of my clients are really enjoying using. It makes their experience with their website much less dreadful. There’s so much flexibility for the developer and also for the designer.

 

I wrote only a couple lines because I didn’t want my social icons to have a background, I felt like the weight of the icons were too heavy and distracting for the area.

The result is the icons inherit the color set for the footer text, and we remove the circle backgrounds.

 

In addition, if you want to change the size of those icons, just add: font-size: 1.5em; to the i:nth-child(2).

How To Do Modular Custom Page Titles In Beaver Builder

I’m an advocate of modular code and not having to do things twice (or a dozen times). I also actively think about future general changes to a site and a way to do those in as few steps as possible.

Beaver Builder is fantastic for speeding up the productivity of site builds and it’s incredibly user friendly compared to other page builders. It’s also developer friendly too! Meaning you can easily create custom modules of your own.

You could of course use the builder to do custom page titles similarly, which is why by default the settings are to not show the page title. But in my case, I add a background image with an overlay color to the page title using the featured image (code not included on this post), while having a default background if a featured image is not set. Because this is a header with a style that should be uniform across the entire site, there will not be a need to have access to different styles for these. And, for example, if I wanted to change the overlay color of that background image across the site of maybe 50 pages, you can see how mind numbingly tedious that can be, changing a color 50 times. When instead, I could set it with css and change it just once instead. Setting a global style like this also minimizes client error and helps enforce branding guidelines. 

For this particular tutorial, we’ll be using the Beaver Builder Theme with the page builder plugin. You’ll need a basic concept of how child themes work and the theme template structure.

Be sure that your Beaver Builder site has page titles enabled:

  1. In the upper right corner of a Page Builder page, click Tools > Global Settings.
  2. On the General tab, navigate to the Default Page Heading section.
  3. To display the default page heading, set Show to Yes. To hide the default page title, set Show to No.

Create the Meta Box text field

A meta box for inputing a custom page title that would differ from the original. This is useful if you have something like “FAQs” and would like to keep that displays in the browser tab, but would like the abbreviation written out on the page for SEO purposes or display.

Meta boxes are a bit complex, luckily there are a couple good generators for this purpose. I recommend and often use the meta box generator by jeremy hixon.

Add this code to your theme functions.php

function custom_page_heading_get_meta( $value ) {
 global $post;

$field = get_post_meta( $post->ID, $value, true );
 if ( ! empty( $field ) ) {
 return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );
 } else {
 return false;
 }
}

function custom_page_heading_add_meta_box() {
 add_meta_box(
 'custom_page_heading-custom-page-heading',
 __( 'Custom Page Title', 'custom_page_heading' ),
 'custom_page_heading_html',
 'page',
 'normal',
 'high'
 );
}
add_action( 'add_meta_boxes', 'custom_page_heading_add_meta_box' );

function custom_page_heading_html( $post) {
 wp_nonce_field( '_custom_page_heading_nonce', 'custom_page_heading_nonce' ); ?>

<p>
 <label for="custom_page_heading_custom_page_title"><?php _e( 'Custom Page Title', 'custom_page_heading' ); ?></label><br>
 <input type="text" style="width:100%;" name="custom_page_heading_custom_page_title" id="custom_page_heading_custom_page_title" value="<?php echo custom_page_heading_get_meta( 'custom_page_heading_custom_page_title' ); ?>">
 </p><?php
}

function custom_page_heading_save( $post_id ) {
 if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
 if ( ! isset( $_POST['custom_page_heading_nonce'] ) || ! wp_verify_nonce( $_POST['custom_page_heading_nonce'], '_custom_page_heading_nonce' ) ) return;
 if ( ! current_user_can( 'edit_post', $post_id ) ) return;

if ( isset( $_POST['custom_page_heading_custom_page_title'] ) )
 update_post_meta( $post_id, 'custom_page_heading_custom_page_title', esc_attr( $_POST['custom_page_heading_custom_page_title'] ) );
}
add_action( 'save_post', 'custom_page_heading_save' );

You’ll now have a nice text box when you edit your page.

Customize the content-page.php

Next, we’ll be editing the content-page.php. Copy this file from the parent theme and into your child theme.

By default, the page title is contained in a header block:

 <?php if ( FLTheme::show_post_header() ) : ?>
 <header class="fl-post-header">
 <h1 class="fl-post-title" itemprop="headline"><?php the_title(); ?></h1>
 <?php edit_post_link( _x( 'Edit', 'Edit page link text.', 'fl-automator' ) ); ?>
 </header><!-- .fl-post-header -->
 <?php endif; ?>

We can now use the custom_page_heading_get_meta function we added earlier to set up the meta box to grab the custom title and store it in a variable:

$custom_page_title = custom_page_heading_get_meta( 'custom_page_heading_custom_page_title' );

Now it’s just a matter of creating addition conditional statements to show the custom title if the value is not empty, otherwise show the default page title.

I never use the page title like this on the homepage, so I also created an addition statement that does not allow this entire block to show if this is shown for the homepage:

if ( !is_front_page() ) :

Our end result looks like this:

 <header class="fl-post-header">
 <?php
 if ( !is_front_page() ) :
 $custom_page_title = custom_page_heading_get_meta( 'custom_page_heading_custom_page_title' );
 ?>

 <h1 class="fl-post-title" itemprop="headline">
 <?php
 if (!empty ($custom_page_title)) :
 echo $custom_page_title;
 else :
 echo $the_title();
 endif;
 ?>

 </h1>
 <?php
 endif;
 ?>
 <?php edit_post_link( _x( 'Edit', 'Edit page link text.', 'fl-automator' ) ); ?>
 </header><!-- .fl-post-header -->

WordPress: How to Filter Tag Cloud

If you remove this limit, I’d think about marking the page with “noindex” if you’re worried about SEO.

Additionally, you can change the tag cloud limit to a number less than 45 too.

$args[number] = 10; // New limit for number of tags

The tag cloud widget isn’t used much now as it was about 5 years ago. There are warnings that it could cause a negative impact on SEO due to “keyword” stuffing.

Free A/B Testing for WordPress

 

Making changes and improving an existing site or page is always fun. But, are you really making “improvements”? How do you track this?

One must-have if you have a website is Google Analytics. Must, must, must. It takes just a few minutes and I ALWAYS include setting this up with any website I build for my clients. It’s important for you or anyone who manages your website to know the basics of Analytics and just be aware of the traffic and reach of your website. For more hardcore tracking and Analytics, I recommend taking a course and consistently dedicating time each month to maintain your site, or hiring a professional. Having that said, it’s important to not focus on SEO over your actual business and your products or services – these are what REALLY sell your brand. Your website and SEO efforts simply help you extend your reach to your consumers.

Back to those “improvements” for your site. You could just make the changes and simply watch your Analytics data for changes. But, it’s easier and a little more fun to do some A/B Testing to compare the results of both versions then make a decision based on that. Most services that offer A/B Testing charge a monthly premium, though, you might be able to find a free trial. But for small websites or less extensive changes, you could get a free ride using a plugin and configuring your Google Analytics with a Content Experiment. Here’s how:

Plugin: Google Content Experiments

Screen Shot 2016-01-14 at 11.48.26 AM

This plugin enables you to use Google Content Experiments on your WordPress site.

Get the plugin »

 

Setting Up A Google Content Experiment

A quick note: be sure you have the proper views set up for your property before you edit your analytics tracking. You should ALWAYS have at least 3 views:

  1. Unfiltered (to track your site without any filters forever)
  2. Master (your master view for current tracking)
  3. and a Testing view (a clone of your Master – to make modifications to your “master&#82#8221; view without mucking up your live master data).

Begin Setting Up Your Experiment

Select your property & view after logging into your GA account. I used my “Master” view to configure this experiment since I don’t feel I have much to worry about with this one.
Navigate to Behavior > Experiments

You’ll then be prompted to fill out a 4-step form. Be sure to have your secondary content/page set up already and the plugin above installed and activated.

Screen Shot 2016-01-14 at 11.37.00 AM

With my settings above, my goal is to lower my bounce rate. A bounce rate is when a user first loads a page of your site and doesn’t click through to any other pages on your site. I’m splitting this test evenly at 50/50. For changes that will be more drastic or risky, you’ll want to do experiment on much less of your traffic, like 15% or so.
You want to make sure you also have a clear call to action for the user to take – lead them into your site or other actionable.

Set The Pages

Screen Shot 2016-01-14 at 11.46.49 AM

Here, you’ll now want to set the old/current page and the new/testing page.

Add The Tracking Code

Screen Shot 2016-01-14 at 11.56.11 AM copy

Having that plugin installed and activated, you’ll now navigate to your original page, go to edit it, and at the bottom you’ll see a box to mark the page as “an original page of a Content Experiment”. This will then allow you add in the code above and save the page.

 

Review and Confirm

Screen Shot 2016-01-14 at 11.57.14 AM

All set! For the next 2 weeks or set time, Google will serve up that B page whenever it decides and track the data for you. No need for a fancy external service to pay monthly for (unless you have bigger goals/needs or don’t know your way around Analytics much). Some of these services do have some fancy benefits though, like heat mapping.

 

Screen Shot 2016-01-14 at 11.58.03 AM

For larger, more risky experiments, A/B Testing should be a habit! You don’t want to change up a landing page only to have your sells or opt-ins drop drastically and your left scratching your head or scrambling to put the old content back up while loosing money in the process.

 

More info: https://support.google.com/analytics/answer/1745152?hl=en

 

Update:

I received an email a few days ago from Google notifying me that the experiment ended. Here are the results!
If you use this setup, let me know what you use it for.

Screen Shot 2016-02-08 at 7.44.02 PM

Adding Apple Touch Icons to Genesis

For the basic favicon.ico, you can simply add this file to the /images directory in your child theme. But, it’s 2015 and there’s a ton of devices using different sizes for their icons it’s probably best to take advantage of those in the case someone saves the website to their home screen on their device.

I thought I’d take some time to research and create a new workflow to solve the problem of my lack of icon usage. Lately, I’ve been using Favic-o-matic to bulk generate ALL the icons instead of saving them out one-by-one. I also just spotted this one in the App Store.

Filter: genesis_pre_load_favicon

You can use the genesis_pre_load_favicon filter to add all the necessary needed icons. You can then place all the icons into the directory specified in $favicon_directory.

View the code on Gist.

 

Plugin

Personally, I like to keep plugins to a minimum but in the case you’re not a developer or you anticipate your client wanting to have control over this themselves, here’s a great plugin that has been kept up-to-date at the time of writing this.

Screen Shot 2015-12-09 at 9.26.27 PM

https://wordpress.org/plugins/favicon-by-realfavicongenerator/