How to Install and Use ACF (Advanced Custom Fields) Plugin

WordPress custom fields are essential for many developers.

They allow you to add customized information to post and pages and build tailored solutions for content creation on different types of websites.

For example, custom fields can be used to include a dedicated menu in the WordPress editor that allows users to add ratings to movie reviews.

Setting an expiration date for your blog posts is another option that can be implemented with their help.

However, because this feature is as complex as it is powerful, many non-developers shy away from it and improvise other solutions instead.

Thankfully, the plugin Advanced Custom Fields makes custom fields available to everyday users and in this tutorial, you will learn all about it.

Not only does the article provide you with an overview of WordPress custom fields and their capabilities, it will also show you in detail how to use the Advanced Custom Fields plugin to get the best out of them for your site.

What Are WordPress Custom Fields?

In short, custom fields are a form of meta data that can be used to extend posts and pages.

In that, they are very similar to stuff like publishing date, author, category, tag and other data that’s common for many WordPress content types.

While that sounds a bit underwhelming, custom fields are actually the single most powerful feature for extending WordPress posts and pages.

Examples Of Custom Fields

So, basically, custom fields allow you to include additional information of any kind to your content.

While not spectacular in the abstract, it gets more exciting when you look at concrete examples of custom fields in action.

I already mentioned some use cases in the introduction. Metadata from custom fields can, for example, take the form of

      • A scoring system to a movie post type
      • Start and end times for events (like in the Event Organiser plugin)
      • Prices for products or color variations and sizes
      • Additional meta boxes in the WordPress editor like the content analysis tool in Yoast SEO.
Advantages Of WordPress Custom Fields.

In theory, you can add a lot of this information to your content in other ways.

Movie scoring can, for example, be directly added to the post. If that is the case, what do you need custom fields for?

The advantage of using custom fields to add recurring data is that they make it easy to change things site wide.

For example, if you decided to move the movie scores to another location inside your posts, your can just do so for all reviews by changing one template.

If you saved the information inside the posts, you would have to edit every single one to implement the same change on your entire site.

Sounds a lot more complicated, doesn’t it?

Apart from that, using custom fields often makes for a much better user experience.

As you will see below, they allow you to include metafields in the WordPress editor and other places from where the filled-in information is automatically added to your finished content in the right place.

This makes things much more comfortable and, if you are developing websites for other people, professional looking.

What sounds better: Giving your client a customized admin interface that does exactly what they want or telling them to write everything into the post and format it by hand?

How To Add Custom Fields In WordPress

While this tutorial will teach you how to use Advanced Custom Fields, it should be said that you don’t necessarily need the plugin to take advantage of this WordPress feature.

That’s because the ability to add custom fields is natively built into WordPress (besides the possibility to code it manually that is).

As you will see later on, Advanced Custom Fields makes the process much easier, yet, for completion’s sake I will quickly show you the alternative way.

You might not be aware of it but there is actually a custom field metabox available in the WordPress editor. However, since version 3.1 it is hidden by default and you need to use the screen options at the top to see it.

After that, the box appears at the bottom of the editor screen.

Here, you can easily add any custom field you like. All you need to do is give it a name and a value.

For example, to let people know which music was in your headphones while writing your post, you can add a custom field called Currently Listening To: plus the tune that’s running at the moment.

When you add this data, it will be saved in the database and can be output on your site.

The key (here: Currently Listening To:) will also be reusable in other posts in the future and can be picked from a drop-down menu.

Now all that’s left is adding some code to whichever template you want this field to show up in. We will dive into this topic in more detail below.

Why Should You Use Advanced Custom Fields?

If this can be done by WordPress by default or by hand, why the need for a plugin?

I mean, a full five-star rating in the WordPress directory at more than a million active installs, means it has to have something going for it, right?

Well, it does. The plugin basically provides an advanced user interface for adding custom fields to WordPress.

Its main advantage is that Advanced Custom Fields has over 20 different presets for custom fields built in, which makes creating them much faster and easier.

The presets include:

      • Text — Single-line text field with optional HTML support and character limit
      • Text Area — Same as Text but with multiple lines
      • Number — Number field that can have optional min/max values
      • Email — Custom field for email input including validation
      • Password — Password input with text masking
      • WYSIWYG Editor — WordPress editor input with options for media insertion and editor buttons
      • Image — Upload an image or select one from the media library. Returns an object, URL or ID.
      • File — Same as image but for files in general
      • Select — Drop-down menu with support for multiple selections
      • Checkbox — Checkbox field for single or multiple items
      • Radio Button — Pick a single item via radio button
      • True / False — Basic true or false selector
      • Page Link — Returns the URL of any post or page. Can be limited to specific post types.
      • Post Object — Returns a WordPress object of any post or page, post type or taxonomy
      • Relationship — Same as post object but with an advanced interface and reordering via drag and drop
      • Taxonomy — Returns an object or ID for one or more taxonomies. Can be limited to tags, categories or custom taxonomy terms.
      • User — Select one or more users. Option to limit choice by user role.
      • Google Map — Set a center, zoom level and width
      • Date Picker — Select a calendar date and return a formatted date string
      • Color Picker — Select a hexadecimal color
      • Message — Leave a message
      • Tab — Combine fields into a tabbed interface

Besides these handy presets, the plugin also lets you define rules to determine where they will show up inside the WordPress admin.

That way you can only show custom fields in certain post categories and otherwise keep the admin area free.

A number of available extensions add even more functionality. Some of them are free like:

      • Advanced Custom Fields:Nav Menu Field — Adds a field for setting custom menus for posts and pages.
      • ACF: Sidebar Selector — Allows the selection of a registered WordPress sidebar.

Others are premium solutions:

      • Repeater Field — Allows users to create complex layouts with any number of fields.
      • Gallery Field — Provides an interface for managing a collection of images.
      • Options Page — Create a custom options page for the WordPress dashboard, good for collecting site-wide data.
      • Flexible Content — Set up multiple layouts with several fields that can be used in any order on the page.

In short, Advanced Custom Fields makes extending your content with custom meta data as easy as filling out a form and gives you complete control over how it is used in the WordPress admin area.

If the above has made you curious, you are in luck. We will now take an in-depth look at how to install and use the plugin to implement WordPress custom fields on your WordPress site.

How To Install Advanced Custom Fields

Advanced Custom Fields is installed like any other plugin. Go to Plugins > Add New and search for Advanced Custom Fields, then press enter.

The plugin should show up on first place and you can get it onto your site via Install Now. When the installation is done, don’t forget to activate.

Alternatively, it’s also possible to download Advanced Custom Fields from the WordPress directory and then upload it to your site via FTP.

In any case, a new Custom Fields menu should now show up in your WordPress admin area.

How To Use The Plugin

Now the real work begins. However, as you will soon see, it’s no real work at all. Creating custom fields with this plugin is a piece of cake.

1. Create A New Field Group

A Field Group is exactly what it sounds like — a group of custom fields that topically belong together.

Creating field groups is the main function of Advanced Custom Fields. Of course, a group can also only contain one field but that is the terminology they have chosen.

To create one, click Custom Fields in the WordPress admin area. The menu you are being taken to shows all the field groups you have created.

For now, it will be completely empty. To change that, find the Add New button at the top and click it.

Don’t worry if it looks a little overwhelming, as soon as you have gone through the process once, you’ll understand everything on there.

For now, however, just enter a name for your field group at the top. After that, we can move on to adding fields to the group.

2. Add And Configure Fields

To start adding fields to your group, just click the big blue Add Field button at the bottom

Here’s what each of the fields in the form means and is used for:

      • Field Label — The name that appears inside the advanced custom fields menu
      • Field Name — Name used inside templates and code. Should automatically be populated with the label. No spaces allowed between words, only hyphens, and underscores
      • Field Instructions — Leave instructions for using the field later
      • Required — Determine whether or not this field is mandatory to fill in. If yes, authors won’t be able to save posts or pages associated with the custom field unless contains something.
      • Default Value — This value will automatically populate the field when creating a post
      • Placeholder Text — Appears within input fields on the editor screen
      • Prepend & Append — Defines what appears before and after the input text
      • Formatting — Check whether or not HTML input into a text field will be rendered on screen
      • Character Limit — Optionally put a limit on how many characters can be typed in
      • Conditional Logic — Rules for when fields are visible
      • Minimum & Maximum Value — Minimum and maximum number allowed inside a field
      • Step Size — Defines the step by which to reduce or increase a number when clicking on the arrows
      • Close Field — Close the currently viewed field to configure others (field group, remember?).

Be aware that not all of these options may show up. For example, minimum and maximum value as well as step size are only available for fields that contain numbers.

There are also additional options available for other field types but we won’t go into them at this point.

Once you are done, you can close the fields to see the entire group. This also allows you to change the order of the items via drag and drop.

3. Configure Field Location And Options

Before we are done here, we need to configure where and how the newly created fields will show up and we do so with the Location and Options panel.

Under Location, you can add rules that determine under which circumstances the fields will be displayed.

They can be included and excluded depending on:

      • post type
      • user type
      • exact post
      • post category
      • post format
      • post status
      • post taxonomy
      • exact page
      • page type
      • page parent
      • page template
      • attachment
      • taxonomy term
      • user

After that, it’s on to Options. Here’s what each setting means:

      • Order No — The order this field group will take if there are several on the same screen
      • Position
        • Normal — Below content editor
        • High — Below title
        • Side — On the side of the editor

      • Style
        • Seamless — Without a WordPress metabox
        • Standard — Placed inside a metabox
      • Hide on screen — Checkboxes that allow you to hide other panels you are not going to need like tags, categories, comments and more
How To Display Custom Fields In Your WordPress Theme

In order to display custom fields on your site, you need to call them in a template file.

Therefore, in most cases the first order of the day is to copy the template for single posts, which is usually single.php.

The hierarchy also tells me that in order to make a custom template for a single post type, We can rename the file to single-postname.php.

Therefore, We will copy the template file and save it as single-books.php in my child theme folder.

After that, it’s time to call our new post meta data, which can be done via get_post_meta() but it is recommended to use ACF’s own functions.

How to Install and Setup WordPress SEO Plugin by Yoast

Do you want to properly install and setup Yoast SEO plugin? At WPBeginner we use WordPress SEO plugin by Yoast because it is the most complete SEO solution for WordPress websites. In this article, we will show you how to install and setup Yoast SEO and utilize all the awesome features that come with it.

Features.

Yoast SEO is the most comprehensive WordPress SEO plugin with many built-in tools and features. Here is a quick overview of some of those features.

      • Change post’s SEO title and meta description on a per post basis.
      • Title and meta description support for taxonomies (e.g. category and tags).
      • Google search result snippet previews.
      • Focus keyword testing.
      • Meta Robots configuration:
            • Easily add noodp, noydir meta tags.
            • Easily noindex, or nofollow pages, taxonomies or entire archives.
      • Improved canonical support, adding canonical to taxonomy archives, single posts and pages and the front page.
      • RSS footer / header configuration.
      • Permalink clean ups, while still allowing for Google Custom Search.
      • Breadcrumbs support, with configurable breadcrumbs titles.
      • XML Sitemaps with:
            • Images
            • Configurable removal of post types and taxonomies
            • Pages or posts that have been noindexed will not show in XML sitemap (but can if you want them too).
      • XML News Sitemaps.
      • .htaccess and robots.txt editor.
      • Ability to verify Google Webmaster Tools, Yahoo Site Explorer, and Bing Webmaster Tools
      • Basic import functionality for HeadSpace2 and All in One SEO. (You can also use the SEO Data Transporter to transfer functionality from themes like Thesis, Headway, Genesis etc).

The premium version of the Yoast SEO comes with even more features.

      • A redirect manager that allows you to easily set up redirects.
      • Video tutorials to help you understand each feature of the plugin.
      • Premium support provided by the folks at Yoast to help you make the most out of your site’s SEO.

How to Install Yoast SEO Plugin

First, thing you need to do is install and activate the Yoast SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you will notice a new menu item in WordPress admin bar labeled SEO with Yoast SEO logo on it.

Now that you have installed and activated the plugin, let’s take a look at how to properly setup this powerful plugin.

How to Setup WordPress SEO Plugin by Yoast

You should remember, that the settings that we select are the ones that we recommend. Other experts may have their own preferences and discretion, so advanced users can ignore anything that they do not like.

If you are a beginner, and you want to use Yoast’s WordPress SEO plugin like we do, then please follow along the steps carefully.

Step 1. Data Transfer

Most of you probably have another WordPress plugin like All in One SEO pack, or a theme framework like Genesis dealing with your SEO data.

If you want to successfully use this plugin, then you need to make sure that all of your previous data has been transported to this plugin before you deactivate the other one.

To accomplish this, we recommend using SEO Data Transporter by StudioPress. If you’re setting this up on a new blog, then skip this step.

Step 2. General Settings

Clicking on the SEO icon takes you to settings page for the plugin. Click on ‘General’ tab and you will notice a button to open configuration wizard. We want you to ignore this wizard, because we will be taking you step by step through each option.

Step 3. Features

Let’s switch to the ‘Features’ tab and enable the advanced settings page.
Don’t forget to click on the save changes button to store your settings.

You will notice new items appear under the SEO option in your WordPress menu.

These items include Titles and Meta, XML Sitemaps, Social, Advanced, and tools. We will be showing you how to setup each one later in this article.

Step 4. Your Info

Next, you need to switch to the ‘Your Info’ tab. This is where you will provide information about your site and the person or company behind it.
First you need to provide a site name and an alternate name for search engines to consider. Your site’s name could be your site’s title.
If you do not enter anything here, then Yoast SEO will automatically use your site’s title as your website name.
The next option is to choose whether this website is run by a company or an individual person. If you choose company, then you will be asked to provide a company name, and you can also upload a company logo.

On the other hand, if you choose a person, then you can add the name of the person behind the website.

Step 5. Webmaster Tools

If you know a little bit about SEO, then you have probably heard that each of the popular search engines, Google, Bing, Yandex, and Alexa allow site owners to add their sites using webmaster tools area (see our guide on how to add your WordPress site to Google webmaster tools).

Webmaster tools let you see insights and other relevant data about your site from specific search engines.

In order to verify your site and see those exclusive data, you have to add a meta tag to your site, or upload a file. Most beginners are afraid to add meta tags, so Yoast put this option in to ease the process. Simply add the meta code that you received from the search engines in the respective fields.

Step 6. Security

The last tab in general settings is labeled Security. This has only one option which disables advanced part of the WordPress SEO meta box. We recommend that you leave it disabled. Disabling advanced metabox will prevent your authors from making advanced changes like noindex and canonical settings (which is good).

Step 7. Titles & Metas

Titles & Metas section under Yoast SEO has several tabs in it. We will cover each one of them.

1. General

Here you can choose the symbol you want to use a separator between titles. Default option is dash, you can use it if you are unsure which symbol to choose.

On this page, you can also disable readability and keyword analysis tab which appear under the Yoast SEO metabox when you are writing post. We recommend that you leave them enabled.

2. Homepage Title

Next, we will work on defining the title for our homepage. By default you will see these fields pre-filled with title-template. So what is the difference between a title and a title template, you may ask.

In instances like your homepage, you may want to create a static title, description, and keywords. But for posts, the title will vary from one post to another.

Title templates allow you to define a way that the title and other meta information is pulled and organized.

Let’s take a look at the image below for the home page settings. By default the template variables in the title field work fine for most website however you’re welcome to change it. The next option is to enter your site’s description. Once you are done, click on save settings button.
Note: If you are using a static homepage, then you will see links to edit your homepage and blog page to add title and meta descriptions.

3. Post Types Titles & Metas

By default WordPress comes with several post types such as post, page, revisions, attachment, and navigation menus. Users can also define their own custom post types.

Yoast SEO allows you to set titles and meta for posts, pages, media, and other custom post types. This site-wide title and meta description will be used if you forgot to add title and meta description for individual post.

We recommend leaving the description fields blank for all post types here. We also recommend using only the post title as the title template.

Remember Yoast SEO plugin also adds an SEO meta box in your post edit area. For maximum SEO benefits, we highly recommend you to manually enter title and descriptions for each post, page, and custom post type on your site. Otherwise Yoast SEO will use the title as defined here and will automatically add description for your posts and pages.

4. Taxonomies

On the taxonomies tab, you can configure titles and meta for categories, tags, custom taxonomies, and post format archives.

Default template variables should work for most sites. As for descriptions, please remember that Yoast SEO picks up descriptions from your categories and tags.

If you do not have any description for terms in your categories, tags, or custom taxonomies, then WordPress SEO does not add meta description in archives for these terms.

5. Archives

On the Archives tab, you have title and meta settings for author and date archive pages, and special pages such as search and 404 pages.

We recommended that you check disable author archives for single author blogs. If you are running a single author blog, then your main blog and the author archives contain exactly the same content. The setting is there to prevent duplicate content.
Leave other settings as they are and save changes.

6. Other

The other tab has some additional settings. Like you can disable picking up descriptions from Dmoz or Yahoo directories for your pages. If you are unsure what to do here, just leave all of them unchecked

Step 8. Social

As we said earlier, Yoast SEO is a powerhouse packed with many features to provide comprehensive optimization.

One great feature of the plugin is that it integrates your site with Facebook, Twitter, and Google+ social platforms.

Clicking on the Social link under the SEO menu will take you to setup these platforms. We will show you how to configure each of them.

1. Accounts

The first tab under the social settings is for all your social accounts. This allows Yoast SEO to tell Google about your social profiles. You need to simply add the URLs and Twitter username for the main social profiles of your site.

2. Facebook

On the Facebook tab, first make sure that open graph meta data option is enabled. Checking this allows WordPress SEO to add Facebook open graph meta data in your website’s section.

This will help Facebook pick up the right thumbnail and page information when a post from your website is shared on Facebook.

The next option is to provide a thumbnail for your homepage with SEO title and description. This image and description will be used when someone shares the homepage of your site on Facebook.

After that you can provide a default thumbnail image URL. This image will be used for all articles that do not have a thumbnail or any other image in it.

The next option is to associate your website with a Facebook profile. This profile can be a user profile as well as a Facebook app. In most cases, Facebook profile is the way to go.

You can add a Facebook admin which will give you access to Facebook Insights for your site.

3. Twitter

As for Twitter, you can add Twitter cards into your site’s head section.

You can also choose the card type to use. We recommend using summary with large image.

4. Pinterest

Pinterest uses Open Graph meta data just like Facebook. Make sure that you have open graph meta data box checked under Facebook settings.

After that you just need to enter the site verification code provided by Pinterest. Simply visit your Pinterest account settings to add and verify your site.

5. Google+

If you have created a Google+ page for your business enter its URL here, and then go to your Google+ business page and enter your website’s URL in about section.

Step 9. XML Sitemaps

Sitemaps are essential for your WordPress site. It is the quickest and easiest way to get indexed and notify search engines about your content. Sitemaps also allow you to tell search engines how to prioritize your content.

WordPress SEO by Yoast makes it super easy to add XML sitemaps in WordPress. The XML Sitemaps settings is divided into different tabs. We will walk you through them.

First you need to make sure that XML Sitemaps are enabled.

After that you need to click on the ‘User Sitemap’ tab and make sure that author/user sitemap options is disabled.
Move on to post type tab and disable any post type that you don’t want to be included into sitemaps.

By default, Yoast SEO disables Media Attachments from sitemaps.

Repeat the same process for taxonomies. If there is a taxonomy that you don’t want to be included into sitemaps, then you can exclude it here.

The excluded posts tab allows you to remove individual posts,pages, or custom post types from XML sitemap. Simply enter the post IDs in the field and save changes.

Step 10. Advanced

The advanced settings page allows you to configure breadcrumbs, permalinks, and RSS feed related settings.

1. Breadcrumbs

Breadcrumbs are great for internal linking because it defines a clean path or trail to the page you are on. These breadcrumbs also appear in search results giving your site extra advantage in the search.
Make sure that you click on ‘Enabled’, this will reveal more breadcrumb settings.

The default settings should work for most websites, but if you want to change something then go ahead. Once you are done click on the save changes button.

2. Permalinks

Just to be clear, we are talking about the Permalink settings in Yoast SEO tab, not in the setting tabs.

This section does not allow you to create SEO Friendly URLs in WordPress. It assumes, that you have already done that.

So let’s take a look at what type of features this section offers.

WordPress by default adds a category base in each category url i.e /category/.

By clicking ‘Remove’ you can strip that part from your category URLs. This is something that a lot of people want. But you can leave it unchecked if you do not want your category urls and page urls to conflict if they are the same name.

Next option is to redirect attachment URLs to parent post. WordPress allows you to attach images and other media to posts. But all of those attachments get their own URLs which in most cases are unnecessary. Therefore by checking this box, you redirect all your attachment page URL to the original post URL.

The next option is to remove stop words from permalinks. Stop words are common words used in plain language. Yoast believes that by removing these, you will create cleaner URLs. While it does make the URLs smaller, we disagree with Yoast. This is why we have left it unchecked.

The next option on the permalinks page is to remove ?replytocom variable from comment reply links. It disables the links for the users with javascript disabled.

Most web crawlers when they visit your site have javascript disabled, so they do not see the URL and can quickly move on. This increases the crawl efficiency particularly if you are running a site with lots of comments.

Redirect ugly URLs to clean permalinks option is not needed in most cases. We advise you to ignore it unless you know what you’re doing.

3. RSS

RSS Feeds are often used by content scrapers to copy content from your website. Yoast SEO allows you to add a backlink to your own site for each post in your RSS feed.

This way, you will get backlinks from their site, and Google will know that you are the original source.

There are options to add your author link, Post link, blog link, and blog description. So get creative. This can also be used to add advertisement to your RSS feed.

Step 11. Tools

As you can see that we have spent a good amount of time getting these settings just right, so you probably want to export the settings as Backup (just incase if you accidentally mess things up in the future). You can also export settings to use it as an initial guideline for all of your future sites that you are going to use this plugin on.

The bulk editor allows you to edit post titles and descriptions in bulk. We do not recommend using it. Duplicate descriptions and titles can cause damage to your SEO.

The other tool is file editor, we strongly urge beginners and even intermediate level users to stay away from these settings. Tiny mistake there can make your site inaccessible for search engines or make it useless.

Step 12. Search Console

Search Console section in the Yoast SEO plugin, allows you to connect your WordPress site to Google Search Console tools (formerly webmaster tools).

You can add your WordPress site to Google webmaster tools and then verify it using Yoast SEO plugin.

Simply click on get Google Authorization Code and you will be redirected to Search Console website where you will get a code. Copy this code and enter it in the plugin settings to complete the verification.

After the verification, you will be asked to select a profile. You will need to select your website from a dropdown menu.

Yoast SEO will now fetch your Search Console data into WordPress. You will be able to see Desktop, Mobile, Feature Phone tabs on screen.

This is where you can see crawl errors related to your website and mark them as fixed after setting up redirects (we will discuss redirects later in this article).

Yoast SEO Premium

The basic Yoast SEO plugin is free and works really well for millions of WordPress sites around the world. However, it comes with an even more powerful Premium version.

Step 13: Redirects

Yoast SEO Premium adds a powerful redirect manager. This allows you to quickly set up redirects on your WordPress site. You can quickly fix 404 errors in your Google search console by setting up redirects and marking them as fixed in Search Console.

Step 14: Customizing and Maximizing the Benefit

Just installing and setting up this plugin is not enough. In order for you to really maximize the benefit of this plugin, you need to customize the settings on per post basis.

Now this would not be a chore if you do it every time you write a post. Let’s take a look at how you can maximize the benefits by customizing.

WordPress SEO for Individual Posts and Pages

When editing any post or page in WordPress you will now see a metabox below the post editor labeled Yoast SEO. This box comes with tons of SEO options allowing you to improve that post and page.

You can click on the title in the snippet preview to edit it. You can also click on the edit snippet button to add title and meta description for the post or page you are editing,

You should write a custom title, and meta description rather than letting it auto-generate.

Sometimes your post title, and your SEO title might not be the same. Every time, you should write a custom Meta Description because the excerpt generator only picks up the first paragraph which might not be the most important one.

Make sure you select a focus keyword, so you can get analysis on how strong your page is for that keyword. For more details check out WordPress SEO tip for beginners – how to optimize your WordPress blog posts.

Once you click Save the post you will see analysis of the post below snippet preview. This gives you even further insights about your specific post or page.

Use the free analysis as a reference point. Don’t kill yourself over it, but usually it is pretty accurate.

WordPress SEO for Category and Tag Archives

Just like your post and pages, you can also override the SEO title and meta descriptions for category, tag, and author archive pages.

Visit Posts » Categories page and click on the edit link below any category. On the category edit page, scroll down to bottom and you will see the Yoast SEO meta box.

You can do that for all your categories, tags, and custom taxonomy archives.

We hope this guide helped you install and setup WordPress SEO plugin by Yoast.