Simple & Easy Help
for WordPress Beginners

GeneratePress Tutorials Coming Soon

GeneratePress logo

During a recent One-on-one online training session with one of my recurring clients, the matter about the dearth of tutorials for the GeneratePress theme came up.

To which I replied that I will have to fix that situation.

GeneratePress is my go-to theme along with the ever so reasonably priced GeneratePress Premium add on plugin.

So this is just a quick note to let all you know that tutorials are on their way for both the free GeneratePress theme along with subsequent ones for GeneratePress Premium.

If you do not want to be left out of the loop, perhaps subscribe to both the Sniffle Valve YouTube Channel as well as the Sniffle Valve website.

Cheers!
Lyle

Change the size of the hamburger icon

GeneratePress logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

Use this CSS to change the size of the hamburger icon and text. Adjust font size as required.

/* Icon and text */
.menu-toggle {
font-size: 40px;
}
Change icon and text

Use this CSS to change the size of the hamburger icon only. Adjust font size as required.

/* Icon only */
.menu-toggle::before {
font-size: 40px;
vertical-align: middle;
}
Change icon only

Fix for horizontal wiggle on iPhone with Elementor and GeneratePress

GeneratePress with Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

For those of you who have experienced a sort of “wiggle” on an iPhone when viewing your Elementor created pages using the GeneratePress theme, this is the fix.

The issue is not that it creates a horizontal scroll bar, but that you are able to move the page horizontally back and forth a bit.

Add this custom CSS to where you add your custom CSS (Simple CSS is my preferred location) and your Elementor created pages in GeneratePress will be rock solid.

A big thanks to Nicholas in the GP forum for this.

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
Fix iPhone wiggle

For those of you who use the Autoptimize and Async JavaScript combination

GeneratePress with Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

I hope that this will help some of you avoid what I recently went through. I spent the entire Canada Day 150 long weekend trying to track down what was going on with my site!

The setup:
I have the above mentioned products installed on the site.

The issue:
I also have Pastacode installed to nicely display the code snippets I provide, including my *must have option* – display line numbers.

When the above-mentioned two were setup with the recommended settings, the following was happening:
– I could not get the line numbers to display
– the mobile menu (GP + GPP) was hit and miss; mostly miss

I tried every conceivable combination (or so I thought) of settings to see if I could get them to all play together nicely. Nope. It was one or the other: line numbers and flakey mobile menu, or awesome mobile menu and no line numbers.

Finally in frustration, I did the unthinkable … I read the instructions! LOL

Turns out it was ONE checkbox in Async that I had completely not paid attention to as it was a default setting. And that was the fix: Un-check the “Enable Autoptimize Support”!  Presto! I have my line numbers, my mobile menu works like a charm, and, no console errors!  Happy camper

Here are the settings that work for me:
image

Conditional display of Google Ads or other content

GeneratePress logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

Sometimes you may want to display Google Ads or other content on certain pages but not on others. For example, one generally does not display ads on the contact, disclaimer, privacy policy, and terms and conditions pages. Maybe the home page as well.

That’s where some conditional PHP comes in along with GP Hooks, part of the GeneratePress Premium add on.

In the first example, the responsive Google Ad will appear on all pages except the Home, Contact, Disclaimer, Privacy Policy, and Terms and Conditions pages. Both examples use the page slug in the array. Place the code in the desired GP Hooks location.

The second example shows an AnyWhere Elementor template shortcode.

Remember to tick the Execute PHP checkbox.

Note: the links in this post are NOT affiliate links. However, the items in the right sidebar are 🙂

<?php if ( ! is_page( array( 'home', 'contact', 'disclaimer', 'privacy-policy', 'terms-and-conditions' ) ) ) : ?>
    <div id="contentad"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxx"
     data-ad-slot="yyyyyyyyyyyy"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<?php endif; ?>
Conditional Google Ads
<?php if ( ! is_page( array( 'home', 'contact', 'disclaimer', 'privacy-policy', 'terms-and-conditions' ) ) ) : ?>
    <?php echo do_shortcode('[INSERT_ELEMENTOR id="3248"]'); ?>
<?php endif; ?>
Conditional AnyWhere Elementor template

Set your own custom colors for the GeneratePress color picker

GeneratePress logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

To save the the time and trouble of entering the same values over and over again for the colors in the GeneratePress color picker, add the code below to a Code Snippets snippet. Set the snippet to ‘Only run in administration area’.

The eight color values in the code are hexadecimal (HEX) values which you can determine from your graphics software or from an online source, such as W3Schools. The order in the code, top to bottom, is the order in the color picker left to right.

Thanks to Tom Usborne from GeneratePress for this.

image

add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
function tu_custom_color_palettes( $palettes ) {
	$palettes = array(
		'#000000',
		'#FFFFFF',
		'#DC143C',
		'#008000',
		'#00008B',
		'#006400',
		'#808080',
		'#FFA500',
	);
	
	return $palettes;
}

Set no title and full width for every Elementor page with GeneratePress

GeneratePress with Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

UPDATE:

You can also set this up so that every Elementor page is set to Contained instead of Full Width. The updated code is below the Full Width code.

NOTE: be SURE to have only ONE snippet activated if your create a new one for this instead of modifying the existing Full Width code!

If you are sure that every page you are going to create with Elementor will have the Disable Elements > Content Title disabled and the Page Builder Container set to Full Width, then add the code below to a Code Snippets snippet. Set the snippet to ‘Run snippet everywhere’. Pages or posts created with the WordPress editor will not be affected.

Thanks to Tom Usborne from GeneratePress for this.

image

image

add_action( 'template_redirect','tu_add_elementor_filter', 999 );
function tu_add_elementor_filter() {
	if ( in_array( 'elementor-page elementor-page-' . get_the_ID(), get_body_class() ) ) {
		add_filter( 'body_class', 'tu_add_elementor_classes' );
		add_filter( 'generate_show_title','__return_false' );
	}
}

function tu_add_elementor_classes( $classes ) {
	$classes[] = 'full-width-content';
	return $classes;
}
Full Width and No Title
add_action( 'template_redirect','tu_add_elementor_filter', 999 );
function tu_add_elementor_filter() {
	if ( in_array( 'elementor-page elementor-page-' . get_the_ID(), get_body_class() ) ) {
		add_filter( 'body_class', 'tu_add_elementor_classes' );
		add_filter( 'generate_show_title','__return_false' );
	}
}

function tu_add_elementor_classes( $classes ) {
	$classes[] = 'contained-content';
	return $classes;
}
Contained and No Title

Switch Elements for Logged In Users

GeneratePress with Elementor logo

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this quick tip to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this quick tip, book a one-on-one online training session

Allows you to switch header, footer, etc. for users who are logged in.

Add the PHP code below into the desired GeneratePress Premium GP Hooks location. Don’t forget to tick the Execute PHP checkbox.

This example is using the shortcode from the AnyWhere Elementor plugin. If you have Elementor Pro, you can use that with the shortcode in the format of [elementor-template id="xxx"] Substitute XXX with your IDs.

<?php
if ( is_user_logged_in ( ) ) {
    echo do_shortcode( '[INSERT_ELEMENTOR id=XXX]' ); 
} else {
    echo do_shortcode( '[INSERT_ELEMENTOR id=XXX]' );
}
?>

Has Beaver Builder Met Its Match

Sniffle Valve - GeneratePress Elementor

With the release of Anywhere Elementor from Anand Upadhyay, Elementor has been elevated to the top of the WordPress page builder heap, IMNSHO. Here is why:

1. To obtain the global template functionality provided by this combination, one would need to purchase at least the Standard version of BB.

2. To utilize that functionality in the commercial version of BB, one still has to use a shortcode, albeit a BB one.

3. One must purchase a commercial version of BB to have the Elementor Library functionality. This is of course provided for in the current release of Elementor.

4. Modules (Elementor widgets) available. Elementor provides a list of widgets that are only available in the commercial versions of BB.

On the downside, the inability (as of yet) for Elementor to be able to place it’s Library contents within other Elementor widgets via a shortcode or whatever other method, precludes it from being able to place non-global “templates” into these areas.

I will be doing a blog post soon on the Sniffle Valve site where I will compare the capabilities and offerings of the these two page builders.

This is not to say that BB is not a very capable system. On the contrary.

But, it has met it’s match 🙂

The Sniffle Valve website switcheroo

Sniffle Valve - GeneratePress Elementor

The Sniffle Valve Rebuild

Dynamik Website Builder

Let me begin by stating that Sniffle Valve has not abandoned the Dynamik Website Builder (DWB) child theme for the Genesis Framework and the Beaver Builder (BB) plugin, nor has their capability and usefulness diminished in my view in any way whatsoever.

They remain an excellent choice with which to build a WordPress powered website and I will continue to create tutorials about them.

The Why

Beaver BuilderThe decision to replace them with the GeneratePress theme (GP) (including the GP Premium add on) and the Elementor (EL) page builder plugin during the Sniffle Valve website rebuild was purely an exercise for me to learn these relatively new additions to the WordPress ecosystem.

I have found that one can “play around” with a new product until the cows come home, but until you actually use it to build out a website, you can never really get the feel for the workflow.

And that is why I did it this way.

Besides, I wanted to learn about them in actual use so that I would be better prepared to create tutorials about them in the future.

The How

Many of you may cringe when I say that I did all of this on the live site, in real time. No need to fear, really, as 1) I had a backup and I tested it, and 2) (unfortunately), the Sniffle Valve site doesn’t get a whole lot of traffic.

I also kept an eye on the Real Time Google Analytics and would take a break whenever someone did pop onto the site.

An Elementor Logo

Elementor

As for the actual work, most know that one of the great things about BB (and EL) is that it leaves your content behind when the plugin has been deactivated and as such, the content was immediately available once the page was opened with EL. Everything showed up in an EL Text widget.

From then on, it was just a matter of arranging the various EL widgets as needed and copying and pasting any of the existing content into them. Quite simple and easy to do.

The part that took the longest was, as usual, trying to decide on the overall design and layout, which would be the same process regardless of the page builder being used. Once I came up with what I thought was the look I wanted (thank you ever so much, Silvia G.!), the rest went quickly.

If you have a good look around the Sniffle Valve website, you will notice that there are not many, if any, bells and whistles.

As a matter of fact, shy of the template used for the page header (photo of me, vertical yellow line on the right side of that column and the blue rectangle with white text), the whole thing could have been done with the free, lite version of BB.

GeneratePress

GeneratePressThat’s the page layout part.

As for the theme, well, this is where GP and the GP Premium add on really shine.

The header and navigation stick and scroll (with resized logo on scroll) is out of the box, completely set up in the Customizer.

The only CSS that was harmed in the creation of the  header was for the placement of the Header widget area containing a WordPress text widget that contains the tag line to the right of the logo.

That bit of CSS was supplied by Tom Usborne, GP’s creator, as a result of a request I had made about doing so on another site. Tom’s support for his products is, in my not so humble opinion, utterly amazing.

WP Show Posts

WP Show Posts

Speaking of Tom and his fantastic products, the only other area of the Sniffle Valve website that was a complete departure from the previous version was the Tutorials page.

Previously, those were a BB row for each tutorial, with a photo, heading, text and icon module in each row. Adding a new tutorial was a bit of a chore.

With the new method, I simply used Tom’s WP Show Posts (WPSP) plugin.

It should be noted that the plugin also does pages, and that is what I did as each tutorial is a WP page.

I just made a separate list in WPSP for each topic, added the page IDs that I had jotted down for each, and then added a WPSP widget to that EL section and selected the appropriate list from the WPSP widget drop down. Too easy.

I had initially set the lists up as three columns, but decided that it looked too crowded. Easy fix. Go back to each list and set the columns to two. Done. Less than a minute.

Wrapping it up

Well there you have it. That’s the story in a nutshell. There is more to be tweaked yet, especially on mobile (I did keep and eye on that during the work using Blisk and Screenfly) but for the most part, it’s workable.

Will I use BB and DWB on other sites in the future? Perhaps.

Unless something else new and shiny comes along.