Using Advanced Custom Fields (ACF) to place buttons and titles in a GeneratePress Page Hero

This article contains affiliate links

It’s well known that GeneratePress is my favourite theme for any type of WordPress site. So much so, that I’m currently already using it on four websites in total. I even made a video confessing my love to this extraordinary theme.

One thing I love about GeneratePress is how customisable it is. It’s one of the reasons I believe it can be used for any type of content. Page Heros have become increasingly more popular as the general population’s internet speed has gone up. I love using Page Heros on my food blog because it really highlights what is being made in the recipe.

Page Heros and wasted space

But Page Heros on their own can be a bit useless and a waste of space. And I came up with what I consider a genius solution to mitigate that problem. To liven up my Page Hero I’ve used the GeneratePress Elements to add in a few details:

  • The recipe title is displayed in a large font
  • A wee subtitle is added underneath
  • One button takes a visitor directly to the recipe
  • Two buttons offer PDF downloads of the recipe (one with images, the other without any)
A demonstration of a Page Hero from liaundliam.ch
A demonstration of a Page Hero from the sourdough bread recipe on liaundliam.ch

In order to make the setup for each new recipe a bit easier I’ve used GeneratePress Elements in combination with Advanced Custom Fields (ACF) for the subtitle and download buttons. My GeneratePress Element for the Page Hero looks like this:

<p>
    {{post_date}}
</p>
<h1 class="hero">
    {{post_title}}
</h1>
<h2 style="font-size:1.3em">
    [acf field="untertitel"]
</h2>
<p>
    <a class="button direkt-zum-rezept" href="#rezept">Direkt zum Rezept</a><a class="button download-rezept"
        href='[acf field="pdf_mit_bilder"]'>Download (mit Bilder)</a><a class="button download-rezept"
        href='[acf field="pdf_ohne_bilder"]'>Download (ohne Bilder)</a>
</p>

For anyone wondering, here are the rest of my settings in the Element:

GeneratePress Page Hero settings

Code breakdown

Let us breakdown the code above and explore it in a bit more detail.

<p>
    {{post_date}}
</p>

This is a built-in template tag from GeneratPress. It will simply display the date as a simple paragraph with no special formatting.

<h1 class="hero">
    {{post_title}}
</h1>

This is once again a built-in template tag. This will simply display the post’s title as a Heading 1 with some CSS added (code available further down)

<h2 style="font-size:1.3em">
    [acf field="untertitel"]
</h2>

This is the subtitle. The subtitle is a custom field created with ACF. The instructions on how to create that field are detailed further down.

<p>
    <a class="button direkt-zum-rezept" href="#rezept">Direkt zum Rezept</a><a class="button download-rezept"
        href='[acf field="pdf_mit_bilder"]'>Download (mit Bilder)</a><a class="button download-rezept"
        href='[acf field="pdf_ohne_bilder"]'>Download (ohne Bilder)</a>
</p>

These are the three buttons. One of the buttons simply navigates to an anchor in the post. The other two (the PDF downloads) are also created using custom fields.

Creating custom fields using ACF

The custom fields are all created using Advanced Custom Fields. These appear whenever a post is categorised as Food. As the website is in German these fields are also in German but what it boils down to is that I have three fields, two are file uploads and one is a single line of text. The names of these fields can all be found in the Element’s code.

The fields appear underneath the block editor in the WordPress backend:

ACF fields underneath the block editor in WordPress

Custom CSS

Buttons

The buttons are designed to be ghost buttons. That means that they are slightly transparent and turn solid whenever the visitor hovers over them. This is achieved with the following CSS code:

.button.direkt-zum-rezept {
    background: transparent;
    color: #ffffff;
    border: 2px solid #009688;
    font-size: 1.1em;
    margin: 10px;
}

.button.direkt-zum-rezept:hover {
    background: #1de9b6;
    color: #000000;
    border: 2px solid #009688;
    font-size: 1.1em;
    margin: 10px;
}

.button.download-rezept {
    background: rgba(224, 242, 241, 0.2);
    color: #ffffff;
    border: 2px solid #009688;
    font-size: 1.1em;
    margin: 5px;
}

.button.download-rezept:hover {
    background: #1de9b6;
    color: #000000;
    border: 2px solid #009688;
    font-size: 1.1em;
    margin: 5px;
}

Page Hero Heading

Because I wanted the Heading in my Page Hero to be larger I added the following lines of CSS. I had to make this code responsive because the text was too large for mobile devices.

@media screen and (min-width: 768px) {
    h1.hero {
        font-size: 3em;
    }
}

@media screen and (max-width: 600px) {
    h1.hero {
        font-size: 2em;
    }
}

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.