Add a different banner to different WordPress pages

Thanks Leo for the post idea!  if you’ve got a great idea for a useful post let us know… shoot us an email.

Ever have a crazy request from a client and it makes you groan in pain, because you know how much work it’s going to be?

Well, this post is going to help.

This post is going to walk you through a painful process = having a different banners at the top of different pages.

But once you understand the process… it’s pretty easy.

I should note that this post is ONLY for folks using Genesis + Dynamik Website Builder.  Is that you?  It should be!


Plan Your Attack First

Ever hear the phrase “You never planned to fail, you just failed to plan.”?

It’s applicable here.

Depending on how many pages / banners you’ve got… things could get out of hand.  I recommend taking some simple notes (in Evernote, with a pen and paper, whatever) so when you get into the technical parts, you have one place to refer to.

All you need to do is note the pages that you want banners on and the filenames of the banner (even if the banners are not made yet, just note what they will be).

So example, here is my sample website:

There are only a few pages on my sample site, but this process can be used for any number of pages.

In my sample site I want to put a different banner on 3 different pages.  So here are my notes:

  • About = banner-about.jpg
  • Products = banner-products.jpg
  • Services = banner-services.jpg

Looking at the list, it’s pretty easy to know what banners will go with what pages, am-i-right?

Keep things simple.


Step 1: Design Your Banners

Now that we’ve got a plan, let’s make the banners.

We need to know how wide to make them and that’s easily done by measuring the width of the website.

If you have no idea how to measure, stuff on the web see this post (towards the middle).

Click on the screenshot below and tell me how wide my banners should be?

Click to enlarge

Click to enlarge

What do you think?

I hope you said 1140px wide.  Did you see that in the lower-left corner?

Now of course every website will have a different looking and different size banners, so I just made mine super-simple to show you how it’s done.

Just a note: most inside page banners should not be super-tall and if you going to use a photo make sure you pick a photo where the interesting parts are on the same horizontal level (ie: don’t pick a photo of the eiffel tower).

Here are my banners (they might look smaller to you, because I had to fit them into this blog post).

Did you look at the filenames?

They match the same filenames as the list I created in Step 1.

Once they are all done, upload them to the Media Library of the site you are working on.

Click to enlarge

With me so far?  Let’s crank up the nerdy-ness.


Step 2: Create Labels  (and Conditionals)

In order for WordPress to know which pages gets what banner, we need to make a Label for each banner.

bbbuuuuttttt….

Each Label ALSO needs to have it’s own Conditional to associate the hookbox with (which will contain the banner html).

GOOD NEWS: Don’t be afraid of this, some of this is done automatically for you!

Let’s go to Genesis > Dynamik Custom > Labels and click on Add

Click to enlage

Click to enlage

Give it a Name (I’m going to call mine banner-about) and CHECK the box that says “Automatically create a Custom Conditional for this Label” <– this is SUPER important!  Don’t F this up.

Your first Label should look something like this:

banner-about-added-new-label

If it does, click Save Changes button!

Now, repeat that process for each BANNER that you want to add to different pages.  Since I want to add 3 banners to 3 different pages, I’m going to have a total of 3 Labels (1 Label for each banner).

It should look like this:

Click to enlarge

Click to enlarge

With your Labels created, let’s move on to generating the HTML for the hook boxes.


Step 3: Create A Hook Box For Each Banner

Let’s go to Genesis > Dynamik Custom > Hook Boxes and click on Add.

Give it a name that would help you know what banner it is.

Since this HTML is for the banner on the About page, I’m going to call it banner-about.

So my screen now looks like this:

Click to enlarge

Click to enlarge

Before you save that, you need to do two more things, the first is you need to tell it where on the page you want your banner to appear (aka hook location).

Since I want mine to appear here (where the red overlay is)…

I need to specify that location, click on the hook box location dropdown menu…

different-banner-hook-location-box

Once you click on that , choose genesis_after_header, like this:

different-banner-hook-location-box-header-selected

Does that make sense?

Good!  Keep going!

Now we need to create the banner html and put it in that hook box.

If you are a little unsure as to what that means, go to any WordPress page and using the WP controls put your banner on a page, switch to Text mode and copy the html.

Regardless of how you create the HTML, get it into that box.

So mine now looks like this:

Click to enlarge

Click to enlarge

NOTE: You’ll notice what my width is 100%, I’m doing that because I want that banner to shrink on smaller scereens (aka responsive).

The last thing we need to do for this hook box is to tell is WHEN to show up.

So when do we want it to show up?

HHHmmm?

We want it to show up when we check the Label for banner-about (we set that up in the last step), so to do that click on the Conditionals drop down menu and choose has_label_banner_about, like this:

Now repeat the process for EACH BANNER.

The end result is that your screen should look like this:

Click to enlarge

Click to enlarge

Make sure you SAVE your changes!

We’re almost there, we’ve only got one more step left… keep going! You got this!


Step 4: Assign A Label To Each Page

This is the last step and it is the easiest!

Go to Pages and edit the page you want to add a banner to.  I’m going to edit the About page first, so I clicked on About and here is my WP screen:

Scroll down past the content and you’ll see a section called Dynamik Labels, and you’ll also notice that the Labels that we made in the previous step are all here.

I bet you can figure out what to do next, right?

Yep!  I think you’ve got it!

Since I am editing the About page, I’m going to check the Label banner-about, so it looks like this:

Now go SAVE the page and take a look at it on the front end (public side):

Click to enlarge

Click to enlarge

BOOM!

So continue along editing each of the 3 pages and checking the appropriate label to get the banner to appear on that page.

When you are all done, visit the public side of your website should look like this:

Does that all make sense?  Need a quick recap?  Here it is:

  1. Plan your pages and banners
  2. Design your banners
  3. Upload your banners
  4. Create a Label for each banner (make sure you check that box!)
  5. Create a Hook Box for each label (and select the correct hook box location)
  6. Edit a page and select the correct Label

After you’ve done all of that (hell, even if you’ve only read this far), it’s ’bout time to grab a few chicken tacos and play some video games.  Mario Kart Wii U anyone?  I call Metal Mario!

Your friends,
Ian & Amy Anderson