I used to think WordPress was only meant for cookie-cutter websites that fit a specific grid. There is nothing wrong with a clean, organized layout utilizing one column for content and a sidebar for related information, but the designer in me is always looking for ways to break the norm. As the demand for content management has grown, I’ve embraced WordPress and tried to learn how to repurpose it to do exactly what I want as a designer. This article will explain how the Advanced Custom Fields plugin has changed the way I view WordPress and allows for unlimited customization in a user-friendly CMS.
[m2leep]
Before you get started with the Advanced Custom Fields plugin, you should have some basic knowledge on coding a WordPress theme with PHP. No need for extensive coding experience, but you should become familiar with WordPress standards like the loop and how to do a custom query. It is never necessary to have everything memorized, as a quick Google search will take you right to the WordPress documentation you need.
For novice WordPress developers, seeing a page full of PHP code can be intimidating—but your website doesn’t have to operate that way. Just start off by hardcoding your pages in HTML, and then you can plot out where the editable parts will be. When you are ready, download the ACF plugin and install it. Once installed, it will show up in your admin sidebar and you can start creating new fields.
[adsense]
Below is a screen shot of a page in the WordPress CMS for my portfolio with all the fields I’ve created using ACF. I love how versatile the plugin is so I can be as specific as I want about how each element of the page is broken down. The fields can be classified in many ways such as text editor, image, and list menu.
An Editable Page in WordPress Using Advanced Custom Fields
How it Renders on the Website
By comparing the screens above to how it renders below, you can see how specific the content breaks down so that the CMS is very organized. This is the part I enjoy most about Advanced Custom Fields. You are the developer and you can sort the data however you want. There is no need to conform to any pre-existing layout or one big text box for everything.
The ACF Repeater Plugin
One step further is to add the ACF Repeater plugin, which does cost money, but I think is well worth it. This allows your client to add and remove fields within another field, such as categories or slideshow images.
As an example, I have a field for Awards set up on my Details page, and then within that field I’ve added three sub fields to break down each award into publication, work, and link. The possibilities are endless and you can nest as deeply as you like.
Once you have created your fields, you need to link them up to a page within your WordPress site. If it’s just specific to one page, you can select that page under Location. There are of course many ways to link to a page such as sharing the same Parent, Page Type, or Template. It is all made very easy to follow on the ACF admin pages. The last thing I do is check off “Content Editor” next to “Hide on screen” to remove the default WordPress text editor since we are creating our own fields. After you save those settings and go to edit the page, you’ll see all your newly created ACF fields ready to be populated. Below is the page for Details within WordPress on the left and how it renders on the website to the right.
Displaying the Data On Your Website
Now for the PHP code to get your ACF data onto the website. We are going to look for the data for each page by using it’s page ID within WordPress, so go find that by checking the URL of the page while it is being edited. You’ll see something like post.php?post=41 in the URL and that number 41 is the ID we will use in our query. Plug the number into the WP_Query function to pull data from that page and then we can use awhile loop to cycle through the parts. To obtain data from a field we created with ACF, all you need to do is use the variable get_field(‘slug_name’), replacing in quotes the Field Name slug. If you forget what it is, just go back to the Custom Fields page where you created the field.
PHP Code:
$the_query = new WP_Query(‘page_id=12’);
while ( $the_query->have_posts() ) {
$about = get_field(‘about’);
$capabilities = get_field(‘capabilities’);
$awards = get_field(‘awards’);
}
Each area of the page is now set in a variable and ready to be placed on our page. The About section is just a textbox, so that can be placed right where we want it.
HTML/PHP Code:
For the Capabilities and Awards sections, I used the Repeater plugin which requires one additional step to output the data. We need to do another loop so it can cycle through each sub field within the main field. The way we access the nested field is to use $row[‘slug_name’] within the loop.
PHP Code:
foreach($awards as $key=>$row){
print ‘’;
print ‘
’ . $row[‘publication’] . ‘
’;
print ‘
’ . $row[‘work’] . ‘
’;
print ‘’;
}
Now we have the freedom to drop this little PHP snippet wherever we want on our coded page and it will output all the data from that specific page in the CMS. You can do as many queries as you want within a single page so there are no restrictions on where the data is pulled from. It is up to you how you want to organize everything within WordPress so that it makes sense to the administrator.
The final thing to keep in mind when working with WordPress in this fashion is that your website will have pages that are there to hold data only, and not set up to be viewed as a real page on the website. To prevent viewers from seeing these pages, I place a piece of code in the header.php file. Since my website is a one page website, the only page I want accessible is the homepage. If someone puts another URL in, this code will bring up a 404 Page Not Found instead.
PHP Code:
$pagetitle = get_the_title();
if($pagetitle != ‘Home’){
$wp_query->set_404();
status_header(404);
get_template_part(404);
exit();
}
And there you have it. A website that breaks the standard WordPress grid can be very easy to build into a custom theme thanks to the Advanced Custom Fields plugin. The other major benefit of this method is picking and choosing what your client gets to edit so that the design will never be compromised. It can become an issue sometimes when a client who is not proficient in HTML has full control of the website layout. With a precisely organized CMS, there is very little room for error that might break the layout. I am by no means a back-end developer, but with a little PHP knowledge and some practice I’ve become comfortable in turning any website into a WordPress theme. The Advanced Custom Fields and Repeater plugins are exactly what I needed to take the plunge into CMS-backed web development.
