#121: The Right CMS is a Customized One

The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn't just a title and content anymore. It's a title, optional subtitle, alternate short title, blurb, full content, related articles, featured image, optional featured video, and optional slideshow/slides. If your CMS can make those fields available on the entry screen, that's a recipe for success.

This screencast covers customizing WordPress to be that perfect CMS for you by extending it with two wonderful plugins: Advanced Custom Fields and Custom Post Type UI.



  1. Tom Hirst
    Permalink to comment#

    Great screencast Chris.

    The ACF and Custom Post Types UI combo is something I’ve been using for a while now on my custom WordPress theme builds. I really like the level of control you can pass over to the end user in the back end and how it blends seamlessly into the default admin UI.

    The reason the “Custom Fields” tab didn’t show when you installed ACF is because the plug-in has been relocated to Github for the time being – details here in the top paragraph: http://wordpress.org/extend/plugins/advanced-custom-fields/ This had me confused too!

    To install it properly so the tab shows, download from Github (https://github.com/elliotcondon/acf/) and FTP up to your wp-content/plugins directory, then activate via the Plugins tab.

    • Barry
      Permalink to comment#

      Yeah that one had me confused too. It really is a great plugin, definitely worth buying some of the add ons like the repeater field. It definitely makes building websites faster as well, I have to spend a lot less time thinking about how to make content as easy as possible for a client to update.

    • Tom Hirst
      Permalink to comment#

      Yeah, totally agree about the add-ons.

      I use the Repeater Field and Options Page ones regularly – well worth the money in time saved!

  2. yoosuf
    Permalink to comment#

    whats so new in this? repeating the same shit for LAME traffic?

    • Chris Coyier
      Permalink to comment#

      Thanks for the jerk-off comment yoosuf. I hope it makes you feel good.

    • Steven
      Permalink to comment#

      You sir, are an idiot.

    • Daniel
      Permalink to comment#

      It’s now time to make a change … just relax take it easy, you’re still young, that’s your fault, there’s so much you have to know.

      Oh, wrong Yusuf…

  3. Joshi
    Permalink to comment#

    Sometimes I think CMS’s are too bloated, like you say all we need is a simple system that allows to create custom fields to display especific content as demanded by proyects, all the extras seem to much.

  4. Michael
    Permalink to comment#

    Wonderful! Just what I needed to inspire my day.

  5. Cory
    Permalink to comment#

    Thanks for the post! Just starting out with custom wordpress, this really helped give me a idea of where I need to start.

  6. PS
    Permalink to comment#

    Neat. Useful post!

    And as mentioned by Tom above, the files for Advanced Custom Fields have been moved to github (https://github.com/elliotcondon/acf/).

  7. Nicklas
    Permalink to comment#

    This would have been so handy like 6 months ago. I was really having a hard time understanding how to add multiple types of content to a post. I assumed there was some smart way to do it, but it still took me weeks to get it all set up properly. I moved to Custom Field Suite from Advanced Custom Fields because ACF didn’t have as good multi lingual support. Hoping to switch back to ACF when v4 drops, it’s really a great plugin. With that said i’m still not a big fan of wordpress, but that’s another story.

  8. Eu
    Permalink to comment#

    Hi… Could you update or maybe expand on how to call the acf functions on a template file? It would be much appreciated. Thanks

    • Emanuel
      Permalink to comment#

      Yes, that would be a very much appreciated sequel to this screencast.

    • Barry
      Permalink to comment#

      Check out the plugin’s extensive documentation here http://www.advancedcustomfields.com/resources/ You basically you call a field like the_field(‘field_name’);

      You should check to see if the field has a value using get_field(‘the_field_name’); and you can even get field values from another post by passing a 2 parameter with the other post’s ID like the_field(‘the_field_name’, 123);

    • Emanuel
      Permalink to comment#

      Thank you, Barry!

    • Chris Coyier
      Permalink to comment#

      We go into this a lot deeper in the latest Lodge http://css-tricks.com/lodge/ series on building a mobile-first artist’s website with WordPress. ;)

    • eugenia masllorens
      Permalink to comment#

      Thanks Chris and Barry. I will have a look!

  9. Danilo Figueiredo
    Permalink to comment#

    Awesome plugins. I used them in my latest project and it made a HUGE improvement http://tedxluanda.com

  10. Terence
    Permalink to comment#

    I’ve been doing this at work for a while and love it – along with either OptionTree or the ACF Add-on options you can have all the content of the site client editable!

    But for events I’ve always used an additional plugin (The Events Calendar) – do you have this set up to check the start date, and if its already passed, don’t show? Never thought of using it in that way, but that issue was always my hang up. Seems like it would be a lot easier then adding an entire extra plugin with more scripts, styles, etc!

  11. Mathias
    Permalink to comment#

    Just on time. I just started digging in to wordpress making i fully editable site.

    I totally agree that wordpress has evolved from a simple blog to a fully fleshed CMS for “normal people”. At least with the help from some plugins.

    A strategy i use with ACF is tying it up to templates not page types. Then I can skip the part of making custom post types. Although in some cases custom post types are necessary. I have the privilege to make my site from the bottom up so I can do it this way.

    Great video by the way.

  12. Dale
    Permalink to comment#

    Why not, in your media queries, define certain classes which modify/hide the content which needs some work on smaller screen devices, rather than using user agent detection?

  13. Dan Boulet
    Permalink to comment#

    Nice screencast Chris. Do you have any thoughts on performance issues when storing data in custom fields? For example, using custom fields for data like dates is not necessarily a good idea since filtering and sorting by custom fields is going to be slow as far as database queries go. It’s probably a better idea to use an event plugin which creates its own database table where the events can have their own db columns dedicated to dates.

  14. Steven Grant
    Permalink to comment#

    I’ve always had a hard time justifying the effort it takes to create custom content types in anything other than ExpressionEngine or TextPattern.

    Of course now Statamic and Craft CMS do the same

  15. Rob Bennet
    Permalink to comment#

    I can’t stress enough how amazingly powerful the ACF plugin is. I’m actually not a fan of using plugins and reserve their use to advanced situations that I require over and over, but I must say, ACF is by far the best plugin I’ve ever come across. One of my favorite features is the ability to build out everything in development and then use the settings to output my custom fields to PHP, which I can then wrap up in a plugin to deploy to staging/production so when I need to make updates/changes in dev I can just re-output the PHP and update the plugin, never needing to create new fields across multiple environments, keep the functionality baked into my git repo without having to sync databases constantly. Great screencast Chris.

  16. tpro
    Permalink to comment#

    Nice video Chris, I think you really need to try MODx CMS. Its more, more flexible possibility like drupal and can be simple like wp.

      Permalink to comment#

      Totally agree! I truly do nog get why WordPress is so popular, basic features like custom fields require plugins?
      Also the loop is hard to understand and file structure confusing.

    • Josh White
      Permalink to comment#

      I’ve tried just about every CMS out there extensively, and WordPress just keeps pulling me back. MODx has some great features, but from a client perspective it’s a bit of a train wreck. MODx and Joomla are about neck and neck in terms of usability a nightmare (in other words, sites on these platforms have had equal problems in terms of clients having issues just using basic navigation).

      WordPress isn’t flawless, but it’s the one I get far fewer complaints on using from a client perspective. Most of us probably experience 99% of our clients usually don’t use the website frequently. So after about 4 months when they finally do end up logging in, they can actually get some basic stuff done.

      But I think the comment about the loop being hard to understand is basically completely missing why WordPress is so powerful. The reason you may not get why it’s so popular is because the loop hasn’t clicked yet.

  17. Guilherme Harrison
    Permalink to comment#

    Hey, you use feedly too! Great reader app!

  18. Chris
    Permalink to comment#

    Great tutorial! Just want to give a shout out to Drupal whose entire system is based off creating custom content type and corresponding fields out of the box.

    However, after seeing these plugins in action, my fear of jumping into WordPress projects is greatly diminished!

  19. Adrian
    Permalink to comment#

    Hey Chris, is this content covered on “the lodge” yet?


  20. Alex
    Permalink to comment#

    Thanks a lot, Chris! You do make awesome screencasts. I remember those days when I was making all these custom post types by typing hard code in functions.php and so =) These plugins are so much easier!

    But indeed using custom fields can kick your database in the ass if you use a very cheap hosting :D

  21. Jesse
    Permalink to comment#

    You just put me ahead of schedule on one project, and caught me up on another. My day is officially made.

    Does Lodge membership come with a fez, or is that extra?

  22. Josh White
    Permalink to comment#

    I don’t see anyone mentioning what’s going on with ACF – but the version that’s on the WordPress plugins is no longer the working version. You’ve got to get it from Git until they release the new version that is new in beta.

  23. Daniel
    Permalink to comment#

    Chris, you just saved me A LOT of time! I used to integrate custom posts in my themes, for specific clients, or a lot of times I ended up developing a separate plugin, specially build for each client. I didn’t know such plugins exist. Thanks!

  24. Lindsay
    Permalink to comment#

    I’m hooked on your videos, your delivery is excellent and I’ve learned so much from you. Css, html and jquery stuff is so brilliant. I don’t understand the WordPress thing though. You are so good at stuff – why WordPress? You have php and MySQL. Why not just put stuff in the database and get it out again for display? The tinymce editor can be configured for an admin section. I don’t understand why you need to conform to the loop when you can write your own php and you know MySQL. I’m trying WordPress but finding it very restrictive. I thought it would make life easier.

    For example, I’ve just written a site where a current newsletter PDF can be uploaded by an admin section. The link on the site is always to the same file because I rename it in the admin’s php when the admin uploads it. How can I achieve the same thing with the custom field thing in WordPress? I can’t figure it out. The admin will upload a new file and the link from the site will still be to the old one.

    I also looked at another screencast where you implement a shopping cart in WordPress. You have to manually enter each product using custom fields. Why not create a table and design a form so an admin section an create the products? Then display the products from the table on the site. Do customers find the WordPress backend easy to use?

    Am I missing something? I DO want life to be easier.

    I do appreciate the screencasts – they’re awesome, and I will always keep watching. I just don’t get WordPress.

  25. Arthur
    Permalink to comment#

    Which is the SEO plugin that appears at Jeff Campana WordPress admin?

  26. Jeff
    Permalink to comment#

    Have you done any work with the PODs Framework? They seem more in depth than the ACF and Custom Post Types UI combination. I would like to see what you have to say about it in comparison.

  27. Dianikol
    Permalink to comment#

    Nice features. Have you tried drupal? All these things come by default for use, custom fields content types in avery sophisticated way. A liitle hard to master drupal but it worths it. For me that’s the most customizable cms with great API and such.


    • Chris Raymond

      The big problem with Drupal–if you care at all about clean semantic markup–is that it outputs nested divs up the wazoo with such semantic classes like field-field-view, view-view-odd, etc. any of which could appear in dozens of places on a large site in different contexts, making it a NIGHTMARE for a designer to style via css. Not to mention, and I am not exaggerating, trying to use a tool like Firebug to do design/css tweaks you can end up having to click through EIGHTEEN LEVELS of divs, like outer-content, inner-content, field-field-view field-title fields-field view, ad infinitum to try to find a specific selector to target. And all that html cruft is so thoughtfully added for you via Drupal developers and you are expected to think this is a wonderful feature, not the html bloat that it really is.

    • Dan Boulet

      Chris Raymond, to be fair, what you’re talking about is not specifically related to Drupal core—but to an add-on called the Views module. It’s true that the default markup output by this module is a bit of a nightmare, but it can actually be completely customized pretty easily through the system UI or by using template files in your theme.

    • Chris Raymond

      Dan Boulet, point taken.

      But unfortunately, I as the designer has little say over how the Drupal in-house developer sets things up; his view is that all that divitis is a great feature and it makes everything customizable, and doesn’t care about semantic html. So you have all the html generated by Views, plus that generated by a selected theme, and it ends up being a nightmare when the developer doesn’t wish to create custom templates. In contrast, when I work in WordPress, I don’t have to fight to overcome or work around a whole lot of extraneous excess markup.

  28. Ben
    Permalink to comment#

    I was trying to figure out a way to make it easy for a client to add menu items for their restaurant to different pages and it sounds like how you did things for your ceramics friend’s events would be similar. Excited to get that working! Thank you!

  29. Nicolas
    Permalink to comment#

    Interesting discussion. What do you think about twitter bootsrap or zurb’s foundation ? I use them as a newbee developer, and i perefer them to CMS. CMS are so sophisticated !

  30. Philip Meissner
    Permalink to comment#

    ACF is a joy to work with, but how WordPress stores custom field data in the wp_postmeta table seems dirty. I’d much prefer a CMS that keeps the data together in a single table. For example

    ExpressionEngine: exp_channel_data
    Craft CMS: craft_content

    And for a flat-file CMS like Statamic, custom fields are in the YAML front matter right there with the content, title, etc.

  31. Grog Jones
    Permalink to comment#

    If your CMS can make those fields available on the entry screen, that’s a recipe for success.

    I wonder why CMS like Perch or Couch get so little mention when this is the only way they function. Every bit of editable data shows up as a separate field in the admin panel.

    To be fair, this is also how EE (and now Craft) work but, like WordPress, both seem overkill for many sites.

  32. Ahmad
    Permalink to comment#

    Great advice! Really gave me inspiration. :)

  33. Karen
    Permalink to comment#

    couch cms is really amazing… it allows you to define editable sections and the latest version even supports contenteditable areas… As opposed to hacking the life out of other solutions, consider using something simple and lightweight if that is the need of your project.

  34. deepak
    Permalink to comment#

    hi I build website by hand coding. Like each element of page is designed by me header, footer, galleries i.e. not using any pre build templates provided by wordpress CMS. All i want to know is, will my website will work normally with wordpress CMS? or I have to tweak it to work with CMS(wordpress). PLz Help!

  35. iampigeon
    Permalink to comment#

    This is an old entry now, but your readers may be interested in ProcessWire, which I’ve found to be exceptionally flexible because the CMS is rather detached from your site’s design.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.