Timber Demo: Options Page with Callout Bar

Create an Options page with Advanced Custom Fields and add a callout bar.

Build and Style a Callout Bar

A "callout bar" is a common user interface pattern to call attention to a new feature or announcement, usually displayed at the top of a site. I often use them in my projects:

Make it editable through Advanced Custom Fields

It is important to make content like this editable through the WordPress admin area rather than hardcoding the content into your theme. We can do this easily through an Options page in Advanced Custom Fields, like this:

What You'll Learn

Here are some of the key concepts you will learn throughout this project-based demo.

  • Registering the Options page in Advanced Custom Fields
    Using conditionals in Twig templates
  • Styling with Sass and naming classes
  • Adding a custom ACF stylesheet
  • Accessing options data throughout the site
  • Workflow tips and tricks

Subscribe to the Tackle Box for access to this demo and all others!

Your Instructor

Lara Schenck
Lara Schenck

Lara Schenck is a freelance front-end and WordPress developer and instructor currently in the Pittsburgh area. In addition to private tutoring and client work, Lara has taught web development courses at General Assembly, Noble Desktop, and Pratt Institute during her years in New York City, and is passionate about providing project-based, online resources for learning WordPress development. More at notlaura.com and @laras126.