Creating a semitransparent intro area above page body.

phc-custom-fields-1Last night in the Beaver Builders Slack channel (if you’re into BB and Slack, go check it out, great place to hang around), @danfrybort asked me how I built the semitransparent intro area on this page, which is, by the way, a work in progress, so things may change after I publish this post. There are a few different things going on here and it took me long enough to figure out, so I figured I’d just write the whole thing up.

First, there’s the way I handled the page title and selection of the header and footer images. I used Advanced Custom Fields (ACF) to build a field group that allows the user to choose from several different color options for the semitransparent color bar behind the page title, as well as designate photos to serve as the background images behind the header and footer of the content area.

Note that, while the user sees teal and other colors as the available selections, I can pass any value I want through to my code. Because the color selections weren’t set in stone when I was building this, I didn’t want to be passing teal, blue, orange, etc. through. If I did that and subsequently had to change the color values (client: “We don’t want orange anymore. Make it red everywhere.”) I’d have a CSS class called .orange with values for red. That would bug me no end, so instead I set the values as color1, color2, etc. When the color change inevitably happens, I’ll just change the label in ACF and the CSS:

For the images, I set minimum sizes so that the end user wouldn’t try to make a 600 x 150px image work as a background photo. ACF allows you to set min and max sizes when you set up the field. In ACF I created a second field group I called Page Intro Block to hold the content for that area of the page. I would have liked to have entered that content via Beaver Builder, but at the time I wasn’t quite sure how that would work. With those fields set up, I ended up with a page editor screen that had two metaboxes added to it; one to choose the title background and header/footer images, and another to enter the page intro copy if it’s needed for that page. To display the pages I had to do a bit of customization to page.php:



The first part handles checking to see if the user has selected an image for the header and if so, makes it the background image of a div called ‘xmit-page-header’ (I prepend all my custom classes and functions with xmit). If not, I assign a default image so the div’s not blank. Note that get_field is not a WordPress function, it’s from ACF.


Then I dump the values for title background color and the header and footer images into variables, test to see if the user’s entered a page intro, and create the markup for the top of the based on that condition. Note that $title_background is used to add a class to the header and $page_intro puts the user’s content into a div I named page-intro. And there are a couple of things commented out because my client hasn’t decided whether to have me display a parent page’s title on child pages or the child page’s title. If that happens, I’m going to have to add another test in there to determine if the page is a parent or child, then display the appropriate title.


After that I run the loop. Because I’ve already displayed the title, I just need to pull the content and display it. The one thing I had to do was add $title_background to the class for the container so that I could have a fat bottom border of the same color as the title background.


Finally, the footer is handled like the header:


The only problem with this solution is that entry for the page intro is handled in the WordPress back end while the rest of the page content is entered with Beaver Builder. I’m sure I could work out a way to do all of it in BB and avoid the whole split-entry kind of thing I have going on, but frankly I just haven’t taken the time to figure it out yet. If anyone has an idea of how to do that, let me know in the comments.