If you don’t know who Nathan Barry is, you should. He’s a great designer, and he wrote Authority, Designing Web Applications, and The App Design Handbook. He’s also the founder of a startup called Convertkit. I highly encourage you to follow Nathan on Twitter and sign up for his newsletter. If you have plans to write a book, grow an audience, or get better at design, Nathan is a great person to learn from.
Nathan is great, but this post isn’t about Nathan, it’s about recreating the images at the top of his blog. First, we know that NathanBarry.com is run on wordpress because if you view the page source on any of his pages, you will see the meta generator tag mentions WordPress.
I asked Nathan how he did this via Twitter yesterday and he mentioned he has a custom theme. In the screencast below, I show you how to use custom fields (with a plugin called Advanced Custom Fields) to alter your WordPress theme and create a design similar to Nathan’s.
The reason mimicking the design of his blog is difficult, is that the header images are outside of typical post content. When adding an image to a post, you are limited to the “content” area of a post page. To copy Nathan’s style, we need to break out of the content area.
Note: In the final version of my blog, I added the following code to content.php.
<?php if(is_single()): ?>
<?php if( get_field( "background_image_url" ) ): ?>
<img src="<?php the_field("background_image_url"); ?>" style="min-width: 100%; max-width: 100%;" />
<?php endif; ?>
<?php endif; ?>
The key addition is adding if(is_single()): and another endif; at the end. is_single() is a wordpress function that returns true if you are on a single post page and false if you are not. My image was showing on my blog home page when I wasn’t using this additional if statement.
Since I released this post, Nathan mentioned that I should consider using featured images instead. Featured images is built into WordPress so you wouldn’t have to use any additional plugins. I am going to create an additional screecast showing this method over the next few days.