Recipe 4 steps

A hero section with a background and a button

The first thing a visitor sees, and what the client keeps updating: a new offer, another photo, different words on the button. Once it is marked up, all of this is edited in the admin, and the layout stays yours.

What you get

Markup index.html

<body wp-fields-group="Home">
<section class="hero" fld-bg-image="Hero background">
  <p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
  <h1 fld-text="Hero title">Coffee for slow mornings</h1>
  <p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
  <a class="button" href="/menu" fld-link="Hero button">
    <span fld-text="Hero button text">See the menu</span>
  </a>
</section>
</body>

In the admin Pages → Home

Home

Hero background hero.jpg

Hero eyebrow Open every day

Hero title Coffee for slow mornings

Hero lead Single-origin espresso, fresh pastries and a table by the window.

Hero button /menu

Hero button text See the menu

On the site home page

hero.jpg — behind the text

Open every day

Coffee for slow mornings

Single-origin espresso, fresh pastries and a table by the window.

See the menu

Six fields in one group: the client finds them on the “Home” page.

Step by step

Name the field group
The wp-fields-group attribute on <body> gives the page’s fields a common heading in the admin. Without it the fields do not appear.
```
<body wp-fields-group="Home">
```
Make the background a field
fld-bg-image goes on the block that has the background. In the admin it is an image field, on the site it is the section’s background.
```
<section class="hero" fld-bg-image="Hero background">
```

Mark up the texts

Short lines are fld-text, a paragraph is fld-area: the client can break lines in it. Every field has its own clear name.

<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
<h1 fld-text="Hero title">Coffee for slow mornings</h1>
<p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>

A button is two fields
fld-link on the link makes the address a field; the caption is marked separately, inside the link, under another name.
```
<a class="button" href="/menu" fld-link="Hero button">
  <span fld-text="Hero button text">See the menu</span>
</a>
```

What matters

Name fields so the client understands them without you: “Hero title”, not “Text 1”.
The texts of your markup go into the fields with “Load data”, and the client does not type them again.

Common mistakes

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

Not like this

<a class="button" href="/menu" fld-link="Hero button">
  <span fld-text="Hero button">See the menu</span></a>

The link and the caption under one name: one field ends up with two jobs and the button breaks. The build reports a collision.

Like this

<a class="button" href="/menu" fld-link="Hero button">
  <span fld-text="Hero button text">See the menu</span></a>

The caption gets its own name, such as “Hero button text”.

Attributes in this recipe

wp-fields-group Give a page its admin fields fld-bg-image A background image fld-text Make a text editable fld-area Longer text with line breaks fld-link A link or a button

What you get

Step by step

Name the field group

Make the background a field

Mark up the texts

A button is two fields

What matters

Common mistakes

Attributes in this recipe

More recipes

See your site’s WordPress admin before you pay.