Contacts and opening hours across the site
The phone and address sit in the footer, in the header, on the contacts page. So the client does not hunt for them all over the site, move them to site settings: change once, changed everywhere.
What you get
<!-- theme-options.html and the footer of every page: the same markup -->
<body wp-fields-group="Site settings">
<footer class="footer">
<a class="footer__phone" href="tel:+15550100199" opt-link="Phone link">
<span opt-text="Phone">+1 (555) 010-0199</span></a>
<p class="footer__address" opt-area="Address">12 Linden Street, Portland, OR</p>
<ul class="footer__hours" opt-loop="Opening hours">
<li><span fld-text="Days">Mon–Fri</span> <span fld-text="Hours">7:00–19:00</span></li>
<li><span fld-text="Days">Sat–Sun</span> <span fld-text="Hours">8:00–17:00</span></li>
</ul>
</footer>
</body>+1 (555) 010-0199
12 Linden Street, Portland, OR
The same fields can be shown on any page; the value is one.
Step by step
The site settings page
Put the footer markup into
theme-options.htmlas well, with a wp-fields-group group: that puts the fields on the settings screen.<body wp-fields-group="Site settings">
The phone: link and number
opt-linkon thetel:link and opt-text on the number. The client changes both: the link that dials and what the site shows.<a class="footer__phone" href="tel:+15550100199" opt-link="Phone link"> <span opt-text="Phone">+1 (555) 010-0199</span></a>
The address
opt-areais an address of several lines; the line breaks are kept.<p class="footer__address" opt-area="Address">12 Linden Street, Portland, OR</p>
Opening hours are a list
opt-loop on the list of days: the client adds “holidays” as a separate row. The fields inside a row are fld-text.
<ul class="footer__hours" opt-loop="Opening hours"> <li><span fld-text="Days">Mon–Fri</span> <span fld-text="Hours">7:00–19:00</span></li>
What matters
- On the site’s pages the footer markup is the same as in
theme-options.html:opt-attributes read site settings wherever they stand. - Do not make site-wide values page fields, or the client will have to change the phone on every page.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<a class="footer__phone" href="tel:+15550100199" opt-text="Phone">+1 (555) 010-0199</a>The number as a field right on the link: the text changes, but href="tel:…" stays from the markup, so calls go to the old number. The log stays silent.
<a class="footer__phone" href="tel:+15550100199" opt-link="Phone link">
<span opt-text="Phone">+1 (555) 010-0199</span></a>The link is opt-link, the number inside it opt-text.