Skip to content
close
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
close
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
Call us Email us
Blue Whale Media Logo
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
Menu
Blue Whale Media Ltd
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
Close Menu
A Beginner’s Guide to Advanced Custom Fields

A Beginner’s Guide to Advanced Custom Fields

WordPress is an open-source content management system (CMS). This means that it gives you the flexibility to customise your website how you want. You have a lot of power at your figure tips with the use of themes, plugins and custom code. With these components, you can customise as little or as much as you want. In this blog, we will discuss how and why you should use the Advanced Custom Fields plugin on your WordPress website.

What Are Advanced Custom Fields (ACF)

Advanced Custom Fields (ACF) is a WordPress plugin, that is used for over 1 million websites. It is designed to make it simple and easy when it comes to editing complicated content. ACF allows you to add fields in addition to the WordPress visual editor or choose to hide it completely. Using ACF you have a wide range of field types to choose from. This including text, media, layout, and much more.

An Example Situation

On the homepage of your site, you want a full-width image with text over it (the hero image). However, your client wants to change both the text and the image regularly. Knowing your client’s ability there are 3 things you need to look out for:

  • An easy way to swap out the image with a new one.
  • The ability to edit the text over the image.
  • To avoid anything that could break the format of the website.

The Issue With WordPress Visual Editor

The full-width image with text is possible in WordPress Visual Editor you will just need to add some CSS classes to the content and then coded it the way you want in the front end.

The problem with this method is that the visual editor is very sensitive when it comes to CSS classes. What I mean by this is if you hit the backspace button one too many times, when trying to replace the text, you can accidentally delete the class. Therefore, the removal of the class removes the code for this content on the front end.

This approach isn’t great for people who don’t have much knowledge of WordPress and CSS. Hence this is not appropriate for our example situation.

The ACF Approach

ACF allows you to create specific fields that our client can use easily and safely to edit the image and text, without the fear of deleting code by accident. Using this approach:

  • Provides a simple editing area for the individual content element.
  • Allows you to control the file size, type and dimensions of the image to upload, this will avoid “client mistakes”.
  • Edit our theme template’s HTML to place our image and text exactly the way we want.

The use of these features enables you to carefully-craft your layout whilst providing your client with the freedom to make changes.

Setup

To create our image and text the way we want on the front end we will need to add some code. The code we’ll use for this example situation is:

<div id="hero">
<div class="container">
<h2><?php the_field('sub_title'); ?></h2>
<h1><?php the_field('title'); ?></h1>
</div>
<?php
$image = get_field('background');
if($image): ?>
<style type="text/css">
hero {
background-image: url(<?php echo $image['url']; ?>);}
</style>
<?php endif; ?>
</div>


This code needs to be added in the pages PHP. Then we will combine this code with some CSS to get it looking exactly how you want.

Conclusion

In both options you need CSS but the ACF approach prevents accidental mistakes. The benefit of using ACF is once it is setup how you want; the layout will stay like that. This means that by using this method your client doesn’t have to remember anything about editing the home page. Although there are some problems for the WordPress Visual Editor it can still work well with the ACF if it suites the circumstances.

Call us

Call

01925 205 035
Email us

Email

[email protected]
Book a Zoom consultation

Zoom

Book a consultation today.

Client Support

Locations

Policies

Careers

Company Reg: 15890531

GDPR Data Protection Act: A8639602

By continuing to browse our site, you agree to the use of our cookies.
OK
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT