02 Jun 2013

Advanced Custom Fields WordPress Plugin

Advanced Custom Fields is my essential go to WordPress plugin. It’s the first, and sometimes only, plugin I install when developing a theme for clients. ACF fills in a lot of short comings that WordPress has as a CMS. It gives you the ability to create extremely customizable custom fields that you can assign exactly where to appear. For example, if you have a field that is only specific to a certain template you can assign that field to only show up when that template is selected.

###Keep code out of the page/post editor We’re all guilty of plopping in code that handles layout in the WP post editor. Of course this can get a bit sketchy and the client can easily turn your beautiful perfect design into a mess. ACF makes it much easier to separate the content from your HTML and CSS. No more <div>’s and <span>’s sitting in your post editor.

ACF is free, however, there are a few pay add-ons. The repeater field is my favorite that I use on nearly every project. It’s perfect for creating repeatable entries like tabular data. You define what sort of content the columns will hold and can then add as many rows as needed. Elliot Condon, the plugin developer, has a nice tutorial on creating a custom image slider you can find here.

Here’s a simple example of something I set up recently with ACF. The client wanted to be able to choose and upload a header photo for each page of the site. In addition it needed to do the following:

  1. Default to a general default picture if no header photo is chosen for a page.
  2. For subpages/child pages the photo should default to that pages parent header photo.

All I had to do was create an image field (in the example below the field name is “masthead”) and use the following code in the template:

<?php 
/* Check if a header photo has been uploaded to the page */ 
if(get_field('masthead')): ?>
<?php $image = wp_get_attachment_image_src(get_field('masthead'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('masthead')) ?>" />

<?php 
/* If not then use it's parents header photo if it has one */ 
elseif(get_field('masthead',$post->post_parent)):  ?> 
<?php $image = wp_get_attachment_image_src(get_field('masthead',$post->post_parent), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('masthead')) ?>" />

<?php 
/* Finally fallback to a default picture if neither exist */
else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/default.jpg" alt=""> 
<?php endif; ?>

Pretty neat stuff - check out more uses and examples at advancedcustomfields.com.

24 May 2013

Jekyll and static site generators

At work I maintain and develop a number of sites with various content management systems (the majority being WordPress and ExpressionEngine). For my own site I wanted to geek out a bit and take the opportunity to try something different. A full blown CMS is overkill for what I needed so I decided to use a static site generator. There’s a bunch of great ones out there. I started playing with Octopress, which is awesome but ultimately I wanted something more bare bones and to create a design from scratch so I ended up going with plain jekyll.

Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server.

Jekyll

###Benefits of using a static site generator

  • Speed Content management systems can be slow and you really have to spend time tweaking things to speed them up. Not having to deal with databases, piles of PHP, plugins, keeping things up to date, etc. is awesome. Servering static html files is about as fast and simple as it gets.
  • Security No databases or server side code also means a lot less worrying about spam and security issues.
  • The writing workflow is a joy, posts are written in Markdown in my favorite text editor.
  • I’m trying to get into the groove of using version control in my projects, this was a great opportunity to utilize a more modern workflow using Git and GitHub. When I’m finished writing a post I run jekyll serve, check the site locally then push & deploy.
  • It’s fun and all the cool kids are doing it.

So here it is, you can take a look at the source here on github if you’d like.

18 May 2013

Fun with figure & figcaption elements

It’s nice having the new HTML5 elements figure & figcaption to semantically markup a picture with a caption. The W3C describes the element as follows:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

And here’s a snippet on how to get a caption that sits over the bottom of the photo as shown below:

Morgan Freeman Holding Cotton Candy
Morgan Freeman Holding Cotton Candy.

###The Markup:

<figure>
  <img src="/images/yourimage.jpg" alt="Image description">
  <figcaption>This is a caption</figcaption>
</figure>

###The CSS:

 /* Relatively position the figure so we can absolutely position 
    the caption over the photo */
figure {
  position: relative;
  max-width: 400px;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
  width: 100%;
  padding: 20px;
  color: #FFF;
  background: #000000; /* Fallback color */
  background: rgba(0, 0, 0, .6);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}