Category Archives: Education

Educational articles around best practices, how to’s, etc.

The many, many uses of Advanced Custom Fields

Editors note: This is a guest post by Brian Goldstein. Brian is a freelance WordPress developer in University City. He’s also nearly completely self-taught.  To see some of his work or to get in touch,  check out briankappgoldstein.comIf you’d like to be a guest writer here on STL WP, let us know.

brian-treehouse

There are a few plugins I tend to use on just about every WordPress install I do – for me or for a client.  I always use a back-up plugin, SEO by Yoast, and I’ll almost always use Advanced Custom Fields.

As a developer or a designer, it’s tempting to hide everything away from your clients, so they can’t break the site you’ve just built. ACF helps maintain the design and code integrity of the site while giving your client a way to update content without you. It uses the same logic as the WordPress Loop, so implementation and troubleshooting is simple.

In this article I’ll show 3 simple use cases from a few sites I’ve worked on recently.

Example 1

A common way to use ACF is with another popular plugin, Custom Post Types UI which makes creating custom post types a breeze. Once you create a custom post type, you then create the field groups you want to use and then make them available only for that post type. Once you enter in all the information, be it text, images, or video, you write a php loop calling in those custom post types. Here’s a more concrete example:

ACF_Example

Here, each of these boxes of content are custom post types. One advantage is that once your client “gets” how to make a new blog post, they also know how to change a custom post type. Here’s a screenshot of the editing view of one of these custom post types.

ACF_Editing

As you can see, instead of the standard WYSIWYG (What You See Is What You Get) content editor, you can show the custom fields. ACFs documentation is a clear and an excellent resource.

After you enter the content for each custom post type, we’re ready to edit our theme files to dynamically loop in our custom post types.

On this project, because I also want to display that content elsewhere, it’s inside content-services.php, not the service.php template file. In this case, they are closely related, as we’ll see.

Here is the code for the query that calls in content-services.php on the service.php template :

We open a php block and define an array with the post type we want, then query that array in our loop. The loop pulls in our content-services.php file, where the code that pulls in our fields live. That code looks like this:

Every time you see “the_field()”, that’s pulling in the information you entered in your custom post type. Because the loop ends in services.php and this is inside that loop, you only need to make sure you close each php block, not the loop itself.

Example 2

This example and the next require purchasing the repeater field add-on to ACF. It’s one of the few premium plugins I’d ever recommend buying.

Using the repeater add-on makes displaying a lot of the same kind of information super simple.

For instance, on a restaurant site I recently built, the client needs to be able to change their menu without calling me each time they want to update a menu item. So I built out the menus using ACF’s repeater function.

Each menu section was its’ own field group – so they could add or remove the groups at will. Then, using the repeater I created 2 or 3 sub fields depending on the menu section. Next, I entered in all the data for those menu items – the name of the item, the description, and the price. Finally, it was time to code it out. Here’s what that looked like. These are inside a container div, which has at least one row, and it’s broken into 2 columns in the bootstrap grid, for some context.

Similar logic – you’re telling it to find the field group app here, and if there are rows, while there are rows, to display the sub fields Item, Price and Description.

Example 3

Using ACF repeater to dynamically insert images into a carousel.

Again, similar code: creating a loop that checks for the field, and then if there is data for the subfield, injects it into the source attribute of the img in the carousel. Because it’s just PHP, you can use it just like you use other WP tags. The client can use the photos they want to use without my involvement. You can see this example and the previous example live on plantershousestl.com.

Truth is, I haven’t even scratched the surface of what ACF can do. If you have an ingenious use for ACF, I’d love to hear from you. ACF’s simple code, easy integration on the WP dashboard, and versatility into any design you can imagine make it a go to plugin for me.

Brian Goldstein, freelance WordPress developer
briankappgoldstein.com
@briangoldstein

Themes and Plugins – Notes from the July 2014 General WordPress Meetup

After a roller coaster of scheduling fun we had our first Meetup in our new location at Lab1500 (home of Pushup). We talked about Themes and Plugins. For those who couldn’t make it we put together some notes from the evening’s presentations. For those of you would did make it, feel free to add your own thoughts via the comments below!

First up, Bob Barker shared with us an official Bob Barker Whitepaper. Here’s the copy from his handout.


Just another Bob Barker Whitepaper. Whitepaper (defined): useless or minimally valuable information that someone distributes so as to obtain your email address in order to send even more junk of even less value (aka fodder).

Places to check out… 

  • Spybar  – a handy toolbar that shows you the software (and plugins) used to build the site you’re visiting.
  • WordPress Theme Generator
    •  (ed note: Chris Miller also mentioned Headway as a similar solution)
  • WPMU 
  • iThemes

Looking for the awesome WordPress themes? Here’s the place to find them! 

http://www.wordpress.org/themes/

As of: 7-16-2014 2,620 THEMES, 106,186,898 DOWNLOADS, AND COUNTING

Looking for the awesome WordPress plugins? Find them here!

http://wordpress.org/plugins/ 

32,251 PLUGINS 695,392,281 DOWNLOADS, AND COUNTING 

Disclaimer: All information and advice provided by Bob Barker, Mid-American Marketing Associates, The Barker Companies, Their affiliates, associates, Their Foundations, employees, or associates of any of Bob’s companies are NOT warranted or carry any guarantee whatsoever. Please seek the professional advice of an attorney or accountant before proceeding with any endeavors as a result from information provided or questions answered; we do NOT guarantee or give any warranty of the information we provide. Please proceed at your own risk.


Chris K. (that’s me) then talked about the various kinds of themes.

From the most raw and basic (and heavy code knowledge to use), to most advanced and determined (with little code editing) there are generally 4 different kind of themes.

  • Starter Themes
  • Regular Themes
  • Child Themes
  • Theme Frameworks

Starter themes

Starter themes are the raw stuff of theme design and function. Many are minimal, barebones themes that you would use to customize and develop up on.  Most have few (or no) design decisions made beforehand. So no pre-defined colors, layout, grid, etc.

A few popular starter themes are:

A starter theme should probably not be your first theme to muck with. Instead I recommend you take an existing Regular Theme and play with it first.

Read more:

  • https://thethemefoundry.com/blog/wordpress-starter-theme/

Regular Themes

These are the majority of themes you’ll find on wordpress.org, elegantthemes, themeforest, etc. In most cases they are well build and well designed themes that have a certain visual appearance (trendy, retro, dark, earthy, etc.) and purpose (photography, real estate, blogging, e-commerce, etc.).

For most of these themes, many design, layout, and functionality decisions have been made for you.  Most will offer some customization via the theme customizer, but to really change things up you’re looking at building a child theme and getting your hands dirty with code.

Child Themes

So let’s say you download a regular theme, make some changes, and maybe even dip into the css or functions.php to add some custom functionality or style. Then an update to that theme is released. Being a good WordPress owner, you click the big update button.

What happens?

Those custom changes are overwritten with that update. Whoops.

Let’s say you get into custom post types, or custom fields – some fairly advanced stuff. How do you keep those changes across updates to your themes? Especially with advanced themes (like the frameworks mentioned below) there are security risks with not updating – updating is good!

The answer? You should create a child theme!

What is a child theme? Like real children, they need a parent to survive and they inherent traits and capabilities from that parent theme.

A child theme allows you to modify an existing theme (even a starter theme. They too have updates!) without worrying about your changes being overwritten with theme updates.

A basic child theme is as simple as having only one file – style.css. From there you can modify any additional files from your parent theme. header.php, single.php, heck even functions.php!

There’s a great article on the codex on creating a child theme. Remember, files (and their modifications) in a child them override the parent theme files, but not overwrite them. Meaning child themes are a great way to take apart an existing theme to see how it works, without making your changes permanent.

For example, let’s say you wanted to modify the footer from a them you found on WordPress.org. You could copy the footer.php from your parent them into your child theme and edit to your heart’s content. When your site is visited, your custom footer.php is loaded in place of the existing file!

Read more about child themes:

Theme Frameworks

Theme frameworks are like a micro eco-system within WordPress. There are tons of options, development hooks, and extensions outside of the stuff you normally would do with vanilla WordPress and a traditional theme.

Some theme frameworks have options that you’d normally see in separate plugins included as part of the framework. SEO options, custom widgets, layout options, security, support, etc.

Generally, frameworks have many custom features and functions that WordPress doesn’t offer out of the box. The catch is that many have a financial cost, and require (or work best with) a smaller selection of themes.

Genesis – one of the larger frameworks available. It has a large user and developer community, many Genesis-specific themes and some brilliant features making managing content, layout, and design easy without touching code.

Thematic – an open-source theme framework

Read more:

Choosing Themes and Plugins

We then talked a little about choosing themes and plugins for use. A few things we suggested were:

  • Start at wordpress.org
  • Read reviews
  • Look at how frequently the theme is updated
  • Check to see if it has the features you need – like being responsive.

Other resources for finding themes include:

Some of my favorite Themes

Plugins

Plugins extend WordPress and new and useful ways. Plugins operate using something called a hook to insert themselves into WordPress.

Hooks basically add some code using either an action or a filter. A plugin that operates on an action works when an event happens – you load the admin dashboard, save a page, etc. Filters happen when you query the database for information – like rendering a page, or a list of pages in a category, etc.

The codex (once again!) has a great entry on Hooks.

Some plugins are very advanced in what they do. They can totally extend WordPress in new directions, giving it capabilities it didn’t have. Some examples:

Read more on plugins

One last thing, in WordPress 4.0 coming in August there is an update on how you search and install plugins. You can read a little about the 4.0 update at WordPress.org.

Like these notes? Join us at our next meetup. They’re free, welcoming meetings where we share and learn together. Find out more at meetup.com.

Three quick WordPress Tips

Everyone loves a good list of tips. These are a few of my favorite, but feel free to sound off in the comments with your own.

1. Access the Admin with /admin – You don’t have to navigate to yoursite.com/wp-admin to login. You can just point to your site.com/admin or my favorite and especially easy to remember your site.com/login

2. Command + K – What sounds like a funky European DJ is actually a recent update to the Visual Editor. When you want to add a link while writing, highlight your text and hit command + K to bring up the insert/edit link dialog box. Windows folks can use ctrl +K.

3. Turn off Comments for Pages – Nothing looks weirder than having a relatively static page (like the About or Contact pages) with random and ancient comments. Turn off comments for these sort of pages and funnel that dialog to posts, email, contact forms, or social media.