Category: Themes

WordPress Tip: Specify a Primary Category using Advanced Custom Fields

What WordPress custom fields should have been

I found Advanced Custom Fields (also known as ACF) about 6 months ago while working on a project for a client. They didn’t want to have to mess around with editing the Custom Fields that come native with WordPress, it just wouldn’t have worked as smoothly.

The client needed to require one image, one PDF, one year selection, and one category. The category consisted of two options, “Weekly” or “Daily”. If you’re wondering, it was a newspaper client who wanted to categorize their posts as being either a “weekly issue” or a “daily issue”. Makes sense for a newspaper!

Getting the native WordPress custom fields to play along well with files can be tricky, and probably not worth the effort, especially with a plugin like Advanced Custom Fields around.

So, enter the hero of this post, Advanced Custom Fields. I was able to set everything up with Advanced Custom Fields within about 20 minutes, and that even counts the time that I took to make various theme templates pull data from Advanced Custom Fields. The actual setup of Advanced Custom Fields took about 2 minutes.

I’ve since started using Advanced Custom Fields here at longren.io, too. Independent Publisher, the WordPress theme I’ve been using, likes to show one main category when you’re viewing a single post, even if it’s not the most relevant category. So instead of a post about WordPress having the Git category shown at the top, I can now specify which category I want to be shown. So, for a post like this, I would obviously choose WordPress as my primary category.

I’ve already added the necessary parts to my Independent Publisher child theme, and have sent a pull request to Raam Dev to get his thoughts. It’s a very easy thing to support in a theme, however, it requires that everyone using that theme use the same field name in ACF.

I named my field primary_category, since that’s exactly what it is.

Example field setup with Advanced Custom Fields
Example field setup with Advanced Custom Fields

After you’ve added your “Primary Category” custom field, you can then use the value of that field throughout your theme. I’ll have a short post later this week on exactly how you can display the primary category value in your theme. Or, if you want to know right now, you can see this pull request at GitHub.

As you can tell, Advanced Custom Fields is a beast of a plugin. I also love that Advanced Custom Fields is totally free, which is kind of amazing to me. I’ve come across many paid plugins that are nowhere near as polished and user friendly as Advanced Custom Fields.

Advanced Custom Fields doesn’t skimp on the documentation, either. Their documentation site is extremely helpful, I never once ventured away from it while getting familiar with Advanced Custom Fields for the first time.

You can download Advanced Custom Fields from the WordPress Plugin Directory, so you can also install it in just a few clicks, right from your WordPress Dashboard! Advanced Custom Fields is developed primarily by Elliot Condon, and can also be found on GitHub.

The great thing about this is that it can be applied to any theme, not just Independent Publisher. So, if you’re not using Independent Publisher, just setup Advanced Custom Fields as I described and make the necessary changes for your theme.

A follow-up post will have more details on using data from Advanced Custom Fields, no matter what theme you’re using.

0

Add Open Graph Protocol Markup to Any WordPress Theme

Rich objects in a social graphs

When you share a link on Facebook, an image from the link is shown, usually. Sometimes, no image is displayed, as if Facebook couldn’t find a suitable image at the URL.

Why?

Adding Open Graph protocol tags to your site will ensure that Facebook knows which image to use when someone shares a page on your website. Open Graph markup is similar to schema.org markup. Both allow you to define values for certain aspects of your website, as seen by other sites like Facebook, Twitter, and many other social media sites.

How?

There’s a couple of ways we can do this. You can use a plugin, like Open Graph Protocol Framework, or you can add Open Graph markup to your WordPress theme manually.

We’ll be covering how to add Open Graph markup to your theme manually. Especially useful for theme developers who want to build Open Graph protocol support into their themes.

The markup we’ll be adding can be seen in this GitHub gist:

Most of that should be pretty self-explanatory.

The og:type property is the only tag that needs explanation, as there’s only certain values that are valid. Most of the time, you’ll probably be setting the og:type property to article or website. A list of other Open Graph protocol object types can be found at the Open Graph protocol site.

The Code

Every Open Graph property will be set on-the-fly, depending on which post or page is being viewed or shared. To add the necessary markup, we need to use the add_action WordPress function inside your theme’s functions.php file. Here’s how I’ve been handing it:

Comments are open below, feel free to ask questions or tell me how wrong I am on one point or another. 🙂

1+

Building a WordPress Child Theme

Make changes to your theme the correct way

Whenever I’m using a pre-built theme and need to make changes to it, I create a child theme and then make all changes to that child theme.

A child theme inherits features from it’s parent theme. This allows you to make modifications to the child theme without affecting the code in the parent theme, which allows the parent theme to be updated as normal, without causing your modifications to be lost.

Benefits of using a child theme

  • If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
  • It can speed up development time.
  • It’s a great way to get started if you are just learning WordPress theme development.

Creating the Child Theme

Only one file is required when building a WordPress child theme, style.css. The only required lines in style.css are Theme Name and Template. I typically use something like the following for my style.css file. Just set the Template value to whatever the name of your parent theme is. In my case, it’s independent-publisher.

Theme Name: longren.io
Theme URI: http://longren.io/
Author: Tyler Longren
Author URI: http://longren.io
Template: independent-publisher
Description: Independent Publisher is beautiful reader-focused WordPress theme, for you. Clean, responsive, and mobile-ready, it gets out of your way and lets you share what you create. Full support for all Post Formats. This theme is ideal for both single-author and multi-author blogs.
Version: 1.0
License: GNU GPLv3
License URI: http://www.gnu.org/copyleft/gpl.html

Example Child Theme GitHub Repository

I put together a simple child theme example, it’s available on GitHub.

Feel free to use it as a base for your child themes. It’s setup to include the parent theme CSS, child theme CSS, and the Font Awesome CSS. If you need help, you can ask in the comments at this post, or create an issue at the GitHub repository.

0

Change your WordPress Theme Favicon

Really easy to do, but rarely done

Not sure how to create your favicon? I typically use GIMP, along with this tutorial. It has some good info on creating “proper” favicons, too, so it’s a worthwhile read even if you aren’t creating a favicon at the moment.

I like X-Icon Editor, too (it’s in the screenshot attached to this post), and there’s tons of converters for creating .ico favicon files.

Just add this modify the following and add it to your theme’s functions.php file, or add it to your WordPress functionality plugin.

function my_favicon() { ?>
<link rel="shortcut icon" href="/path/to/favicon.ico" >
<?php }
add_action('wp_head', 'my_favicon');

Change /path/to/favicon.ico to point to your favicon.ico file and you’re done!

0

How-To: Add Minimal-UI Viewport Meta Tag to WordPress

Introduced with iOS 7.1

I don’t have an iPhone, but my daughter does have an iPad Mini, which is running the latest iOS, 7.1. However, this only works for those of you on iPhone’s, so I see no difference.

Martin Wolf was kind enough to let me use the image from his post about this subject so that I could more easily illustrate the difference. So, even if you don’t have an iPhone, you can still see the changes this makes in the featured image above.

With the release of iOS 7.1 (and possibly late 7.0.x builds), Safari introduced support for a new value in the viewport meta tag. To me, it sounds like it adds effects similar to how Chrome hides its top bar when a page is loaded, but more. For example, the navigation buttons at the bottom are hidden.

I rarely use Safari, like never. Chrome is available on iOS, so that’s what I’ve always used. That’s not to say that you shouldn’t support Safari to it’s fullest, because I’d wager that a majority of iOS users stick with the default, which is Safari.

Chances are, your theme already has a viewport meta tag defined in it’s header.php file. If it does, add minimal-ui to it, so it should look something like this: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />

If your theme doesn’t already have a viewport meta tag set, you can add one with your functionality plugin or theme’s functions.php file like so: 

<?php
function set_viewport() {
?>
<meta name="viewport" content="width=device-width, minimal-ui">
<?php
}
add_action('wp_head', 'set_viewport');
?>

Adding the code above will add a brand new viewport meta tag for you, so only use that if your theme isn’t already using a viewport meta tag in it’s header.php file.

That’s it!

0