Customizing the WordPress Admin

I used to pride myself on how fast I could code a site from start to finish. I would aim to get a full site started by Monday and finished, ready for the client to review, by Friday or sooner. But that was back before WordPress and CMS’s. Before responsive design and usability concerns. Before device testing.

Then I discovered the Advanced Custom Fields Pro plugin for WordPress. Instead of coding everything statically, or using a myriad of custom text fields, I could now organize a powerful admin system, completely custom to the website’s specific content and users. This is where I truly stopped making brochureware websites.

I currently refuse to take on projects that deal with someone else’s code, be it another developer or a pre-made “premium” theme. Too much time is lost trying to figure the where/why/how’s of how something was coded, as well as wading through disasters of the admin area. Instead, I prefer to focus on building custom themes for clients, with extremely organized admin areas. Allowing the client the ability to edit *every single* piece of content on the site, while more work for me in short run, reduces the number of support requests and work in the long run.

So let’s take a look at a few examples of how I set things up in the admin.

Page Templates

The majority of the admin setup is within page templates. Page templates are set up for every custom layout that doesn’t need a post type assigned to it. I’ve also stopped using as many custom post types thanks to the Repeater function of ACF(more on that below).

Sections of the layout are arranged by tabs.  Inside each tab, everything is laid out from top to bottom, as pertaining to the design of the page. The advantage of using ACF over building your own custom fields, is the easy ability to create tabbed sections, and multiple types of content editors, not just text fields, radio/checkboxes or textareas. Let’s take a look at the editor for a homepage I recently built.

1

You can see that each section of the design has its own tab. The design itself consists of a large hero (which is a jQuery slider), three content blocks and a large callout. The first tab section shows a repeater field type, that allows the client to add as many slides to the hero as they want. They can add in a heading and multiple links, or leave links out if they choose.

The ACF builder also allows you to turn off the things you don’t need for that template. I almost always hide the default WordPress WYSIWYG and Featured Image boxes (unless it’s a post). This cleans up the page a bit, so there’s no confusion about which fields you’re supposed to populate.

2

3 4

The second, third and fifth tabs are just content blocks with images, headings and buttons. While I would normally use a repeater for content blocks, instead of separate tabs, the content requirements were all slightly different here.

screenshot_42

The large callout section consists of just a background image and a tagline.

The advantage to laying out the homepage template (and every other custom template) this way, is that it’s clear to the client where to go and how to update. It’s now very rare that I need to give walk-throughs or tutorial sessions. The client logins in and takes a look around and just gets it.

 

Option Pages

I’ve also stopped using WordPress’s built-in Customizer in favor of ACF’s Option Pages. It lets me set up a section with fields for customizing the general theme settings, footer and header (if necessary). This can be as simple as a few fields for social media links, or as complicated as allowing the client to change colors and fonts (I only do this for resellable themes).

screenshot_44

If you’ve ever had a client ask you to change one word 10 different times, you’ll understand quickly why I even spend the extra time to allow them to edit text that will probably never change, like the headings in the footer areas.

6

Custom Post Types

I mentioned before that I no longer create as many custom post types as I used to. This is thanks to the ACF’s Repeater field type. Before, I’d create a custom post type for something like ‘testimonials’, even though I didn’t need a single template or pagination, just so the client wouldn’t have to cloud up their Pages section with children or have issues assigning them as children pages. Now this can be taken care of with the Repeater field and a custom page template. I now only create a custom post type if the repeatable content needs pagination and/or it’s own single page.

Why not use Drag and Drop Builders?

I’ve had clients before that don’t like the disconnect between how the admin is laid out, and how the final design looks. So they prefer to use live drag and drop builders instead. I really, really hate these. Here’s a few reasons:

  1. They give the client too much control. Just like pasting in content from Microsoft Word into a WYSIWYG and getting tons of crap that messes up the website, these builders offer too much control and often lead to a ton of impossible-to-fix bugs.
  2. They insert tons of terrible HTML and inline CSS. ACF Pro doesn’t output ANY code, just the entered content. Drag and drop builders on the other hand, insert some nasty code. Some even create massive divitis. Uck.
  3. They’re a pain to customize. Just try overwriting that super specific CSS. Or some require that you create little mini add-on plugins to edit the output. It’s a timesink.

Why Should I Care?

I can be a bit OCD when it comes to organizing. I organize my code the same way, and spend lots of extra time thinking of ways to make things even cleaner. But if you’re not a fan of doing revisions and support requests (who is??), it’s worth the extra time up front to take the time and make things as easy as possible for your clients and admin users. Plus I think if a client comes to you and pays your for your time, it’s on your shoulders to give them the best for their money.

I would love to hear about some of the ways you structure your admin areas. I’m always looking for a cleaner, better approach!