Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Hide page elements in Beaver Builder using URL parameters

Watch below as I teach you how to show and hide different elements on the SAME page using Beaver Builder and the power of URL variables.

If you’ve never typed $_GET in your life OR you’ve seen it but never known what it means in PHP, this is great tutorial for you.

By watching this video you’ll also be able to understand how URL parameters can be integrated with CSS to alter what is on the page.

Don’t quite get it? The video will show you exactly what the heck I’m talking about. It’s very valuable stuff!

Here’s the video

Introduction to this tutorial (what the heck am I going to be talking about why you need to learn this)

This tutorial will show you guys how you can conditionally hide things on your page using URL parameters. Now, what do I mean by that? The best way to describe this is to just show you guys.

TIP! In this tutorial (and as shown in the video) I’m using the Beaver Builder, page builder plugin for WordPress which allows you to drag-and-drop to build a websites. You can check the website here.

A great use for this technique and what we’ll use here in this tutorial is when you have different types of pricing for different people associated with your business. Say you have your Standard Pricing that people see when they come across your website online.

BUT you then have partners. Partners are people two promote your product out in the real world. But they need discounted pricing so that when they do in fact sell your product they make their margins.

Now, you could go ahead and create your pricing page with your standard pricing and then create a secret page that you only send to your partners, but that means managing two different pages.

This tutorial will show you how we can add a variable into the URL such as

?plan=partner

and then change what pricing table is displayed.

How this will all work in the end

Here is what our default Pricing Page looks like when someone visits our Pricing page. Our pricing page has the url of /pricing. It shows two pricing tables = the top if the public Standard Pricing and the bottom is the Partner Pricing. Notice the difference in color and also the different prices between the two.

pricing-all-plans-shown

In this tutorial we’ll hide the bottom Partner pricing row by default so that the page only shows our Standard pricing, just like below.

pricing-plan-standard

Then, when we add our variable ?plan=pricing to the end of the URL as pictured below.

hide-element-url-pricing-plan

The Standard Pricing table hides and then the Partner Pricing Table shows. Like below.

pricing-plan-partners

It’s the same Pricing page but we’re just going to show and hide the different rows based on the URL parameter.

This is incredibly powerful stuff and exactly what you’re about to learn how to do ridiculously fast.

Best of all, you’ll also be exposed to one of my favourite WordPress things – the Body Class filter!

Step 1: Create the Pricing page using Beaver Builder

The first thing that we’re going to do is create the Pricing page. Within it, add the two different pricing tables: 1.) the one that we’re going to show as standard, and 2.) the one we’re going to show for partners when they add the URL variable.

Go ahead and create a page like you normally would by going to the WordPress Dashboard > Pages > Add New. 

Next, launch Beaver Builder to edit the page.

For this demonstration I am going to start with a blank page. If you’d like to follow along with this tutorial, here’s what I am going to do to build my custom 404 page using Beaver Builder.

Let’s create the row with our pricing table for the standard pricing we’re offering.

  1. Add a row with one column in it
  2. In this column, add a heading module with the title “Standard Pricing”
  3. Add the pricing table module – so, under the Advanced, there’s pricing table module. Let’s just drag that in and we’re just going to create three dummy pricing plans. Customize the plan, price, duration, features, and the colors for each pricing plan. Let’s make it a blue. (For this example, I’ve created 3 of them). Just remember that the Standard Pricing will be displayed publicly.

Now, make a duplicate of the Standard pricing row in Beaver Builder. To do this, hover over the Standard Pricing row we just created and click the duplicate icon to duplicate the row. In this second row that we’ll use for the Partner Pricing, edit the heading module. Name it ‘Partner Pricing’. For this tutorial, let’s give it a different background color. That way, when we put in the URL parameter, we’ll then be able to see if our code works in a noticeable way because the background of the row will change and make it apparent that the URL parameter has worked.

Next, edit the pricing table module in the Partner Pricing row you just created through the duplication process. For the pricing, let’s just assume it would be less so it’s going to be $9 instead of 19. A good discount. We’ll keep the same and just to show you guys, we’ll change the color from a blue to a black.

So just to review, we have two rows: one for the Standard Pricing, and one for the Parter Pricing. Each differs in color and the amount set up for the plans.

Your page should look like the below if you’re sticking tightly to this tutorial.

pricing-all-plans-shown

Step 2: Add a CSS Class to each of these rows we’re going to be toggling

By default, the Standard Pricing row will show and the Partner Pricing row will hide. Once we add our URL parameter, we’re going to hide the Standard and show the Partner pricing row.

We’re going to toggle the show/hide of each pricing row using CSS, so we need to add a CSS class to each of these rows to be able to target each of them in our CSS.

In the Advanced tab for each row there is a CSS class field to enter the CSS class field for that row. For the Standard Pricing field let’s write into this CSS Class box fl-row-pricing-standard, and then Save the row.

Now, let’s give our Partner Pricing row a CSS class the same way, except in the CSS Class box we’ll give it the class of fl-row-pricing-partner. Click Save.

Ok, so now we have two rows with our two different pricing. Furthermore, they both have different CSS Classes which will allow us to go onto the next step and target them individually using CSS.

First, we need to save the changes we’ve just made. In Beaver Builder click Done and Publish Changes.

Step 3: Use the body_class filter and CSS magic to toggle the display of the pricing plans

Next, what we need to do is to hide the Partner Pricing by default. So what we’re going to do is we’re going to the functions.php file in our Child theme. Please note: You can access functions.php using Control Panel (cPanel) or FTP.

Don’t be overwhelmed at this next bit!

At the bottom of your functions.php file paste in the below PHP code.

Let’s review this php snippet of code. It’s one function and it’s only fourteen lines of codes so it’s relatively simple.

add_filter('body_class', 'bb_body_class');

In WordPress, add_filter allows you to manipulate something before it is output onto the page. body_class is actually a built-in WordPress filter and you can click the following link to read about it on the WordPress Codex. https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class

The body_class filter is used to filter the classes that are assigned to the body HTML element on the current page.

Now, quickly, let’s recap. We know that websites are built using a series of HTML tags. The <head> tag is where our scripts, meta descriptions etc all go.

Our actual website is in the <body> tag. We know this.

WordPress by default adds some classes to this body element (see the image directly below). Notice in the screenshot below that you can see the <body> element has class=”page page-id-1548″ etc. These are all applie in default WordPress. “Page” is the post type of the currently viewed page on our website, the ID of this page is 1548 etc.

view-source-code-chrome-hide-elements

TIP! One of my favourite classes that is added to the body element in WordPress by default is the logged-in class that is added when a user is loggeed into the website. This allows you to show / hide things on the page depending on whether a user is logged in or not.

When WordPress is generating a page, it gets a list of classes to add to the body element and then outputs this list on page rendering.

The body_class filter allows you to remove items from the list and ADD to this list before the is generated. We’re going to do the later in this tutorial and add to the list of classes added to the body element.

So what we’re going to do now for this tutorial is add a new class this body element and change it depending on whether the URL is loaded with our URL parameter ?plan=partner on the end, like http://videos.onedaywebsitedesigns.com.au/pricing/?plan=partner. Here’s how:

  1. By default we will add the class pricing-standard and this will HIDE the row with the Partner Pricing
  2. If the URL contains our URL parameter ?plan=pricing, we will output the css class pricing-partner and hide the standard pricing row and SHOW the row with the Partner Pricing.

Let’s do this.

Going back to our functions .PHP file and go through this function, we want to add a new class to the body element using this function and this is a function here (see codes below) and this function takes an array.

[ADD CODES}

If you don’t know arrays, don’t worry for now. Just copy and paste the function from the blog post and you can tweak what you need. But you can go back here and it actually tells you: Note: $classes is an array’. Arrays are just a list of items.

So add_filter {body_class, do this function. So this is how you access a variable in the URL.

So if we go back to this URL: http://videos.onedaywebsitedesigns.com.au/pricing/?plan=partner . See the (?) in your URL. It means you’re trying to add some variables and then let’s say the variable plan=the value partner.

So to get the above value, you use the syntax:  $_GET, {‘plan’}. (Note: Enclosed in ‘’ is the name of the variable.)

Now if you have any questions about this in a bit more detail, you can just send me a message or comment below this video.

If it’s a bit of PHP, you can research a bit about this. I use a lot of this Function but if you don’t know copy and paste it and just change what you need to change.

So for instance, if you’re trying to set a new variable in the URL, you just come to the codes and replace with your new variable. Save the changes and reload the page.

To confirm the changes, you can just go to the page and Inspect Element. And on the ‘body’ section, we can see that on the Class, the new variable has been added.

How to Edit the Style CSS in your Child Theme (or wherever you put your CSS)

  1. Got to FTP or Control Panel.
    [Insert image of the cPanel or FTP]
    2. Inside your Child Theme, let’s say we want to hide the Partners Pricing table by default. To do that, go to the Page Builder and click ‘Edit’ to get the CSS class. Click ‘Advanced’ tab and copy the Class ID.
  1. Go back to the Child Theme’s CSS.

Put a dot (.) and paste the Class ID.

So, for this example: we’re going to have: .fl-row-pricing-partner{display:none;}

Save. With that code, the Partner Pricing will be hidden by default.

  1. To show the Partner Pricing when the variable is set, get the variable name.

For this example, the variable will be pricing-partner.

  1. Go back to the Child Theme’s CSS.

You can just refresh the page to see the changes.

http://videos.onedaywebsitedesigns.com.au/pricing/?plan=partner
http://videos.onedaywebsitedesigns.com.au/pricing

 

That’s it. Remember this: when doing such changes, the possibilities are endless. With what we have discussed on this tutorial, you don’t need to create separate pages. Well, in case you need to have pages such as for Refund Policy, different terms, and other pages, then you can create separate pages because it will make sense. It will be easy to manage. But if you’re only going to change the pricing, then you can just have one page and use codes to hide/show the pricing pages.

I would not recommend a lot of content with this that may cause some confusion as you toggle on and off some pages. Using the discussed parameters and codes, you can have a very simple and powerful way on how to tweak things on your pages.

For further questions, you can just left comments on this blog post and I’ll be happy to answer them for you J Head up to our website: http://beyondbeaver.com/ and don’t forget to follow us on Twitter: https://twitter.com/beyondbeavercom  or subscribe to our Youtube Channel:

 

 

 

 

 

 

 

 

Written version coming soon

Here’s the code in the meantime 🙂

Add this to your functions.php file inside your Child Theme

Then, here’s the CSS used in this demo.

 

2 Comments

  1. wrumwrum on October 22, 2016 at 1:21 am

    Thank you Grant, it is very nice tutorial. It is something I am looking for – not only tweaking Beaver Builder “knobs” but also utilizing hooks, a bit of php logic – things “beyond beaver” 🙂

    Small detail: in style.css file, in the line nr 11 (comment), shouldn’t it be: ‘show the PARTNER pricing…’ ?
    greetings from the new user in Poland

    • Grant Ambrose on October 25, 2016 at 10:38 am

      Great to hear!!!!! I’ll be mixing up my tutorials with some beginner content and also some more advanced stuff to help people learn and push them out of their comfort zones 🙂

      You’re correct about the comment update! 🙂

Leave a Comment

You must be logged in to post a comment.