My Home on the Web. Where the Code Snippets Run Free.

Adding Custom Fields to WordPress

Adding Custom Fields to WordPress

Have you ever had a custom block of styling code you needed to insert into just one page or post? You could add the code to your child theme’s standard style.css file, but that code will load site wide. More code equals longer site load times. A few lines will not make a big difference, but eventually this will have an impact. For example, in my recent Accessing Jetpack’s Hidden Genericons post, I wanted to add unique CSS to call-up a few Genericons as one-off icons used only on that page. Loading that CSS every time would be pointless. I’m also not a big fan of external resource links, because I lose control. Creating a reusable Custom Field seemed like the ideal choice.

What Is A Custom Field?

A Custom Field is simply a page or post specific meta-data reference. The meta-data content is usually accessed via a theme’s or plugin’s Action Hook, or through an appropriate WordPress function. This could be anything that will be later used on just that single page or post, such as a page specific Google Analytics tracker, or a reference to the album you listened to as you wrote:

Current Album: Bruce Springsteen - Greatest Hits

Initial Setup

We will use the Custom Field to reference a unique CSS style sheet. I’ll be keeping those files in a sub-folder of my child theme called /post-styles/. Using your host’s control panel (cPanel) or FTP access, you will want to create a similar structure.

Now, upload to the sub-folder your custom styling sheet.

Create Our Custom Field Functions

Let’s do some coding and create a unique function. As always, make a copy of your functions.php file before commencing. PHP, unlike CSS, is much less forgiving. If you make a mistake that locks up your site, having a backup to overwrite your invalid new version will make restoration quick and painless. Here is our custom function:

Function Breakdown

get_post_meta() function
The WordPress get_post_meta() function will retrieve the Custom Fields for a specific page or post (specified in the first parameter). As we want the current post’s Custom Fields, I am using the get_the_ID() function.
The second parameter is optional. If not provided, all Custom Fields on the specified page or post are retrieved as a key/value pair array. As I do not need all of them, I have chosen to narrow the selection to the ‘style_insert’ key’s corresponding value, which is the file name of our style sheet.
The final boolean parameter is also optional. ‘true’ specifies that we want a single String value returned. ‘false’, the default, would generate a value array. The retrieved ‘style_insert’ value is then stored in the $stylesheet variable.
wp_enqueue_style() function
The WordPress wp_enqueue_style() function is used to queue up a style sheet to the <head> of our site.
The first parameter is assigned as a unique id in the link statement. WordPress will automatically append ‘-css’ to the specified handle. In this example, the id will be ‘post-stylesheet-css’.
The second parameter is the source location for our custom style sheet. I am concatenating the Custom Field value we retrieved onto the child theme’s directory and custom style sheet sub-folder.
The third parameter specifies if this style sheet has any dependent style sheets that must be loaded first. As we have no dependents, we will leave this at the default ‘false’.
The fourth parameter specifies a version number that should be referenced. As there are no more versions planned of our custom style sheet, we will also leave this at the default ‘false’.
I also chose to wrap this code in an if statement to add a bit of error correction. Should the Custom Field value be blank, the style sheet addition is skipped.
add_action() function
With our custom function complete, the WordPress add_action() function is required to add our custom function to the WordPress style sheet queue via the Action Hook.
The first parameter specifies which Action Hook our function should be attached to. For this example, that would be the WordPress wp_enqueue_scripts() function.
The second parameter specifies the name of our custom function to be loaded.
The optional third parameter refers to the priority sequence of our function relative to other functions and scripts being called by wp_enqueue_scripts(). I have intentionally placed this function far down the priority list, which should allow for the parent and child theme standard CSS to load first. In the future if I need to override the standard CSS for a unique page or post, having the lower priority will help.

Add to the Page or Post

All the heavy lifting is done. We just need to add our Custom Field key/value pair to the page or post.

Scroll down the page or post and see if you have the Custom Field entry section on your WordPress editor. If not, make sure the feature is enabled under “Screen Options” at the top of the page:

Enable Custom Field under Screen Options

Enable Custom Fields under Screen Options

Now, click on Enter new and add the Custom Field key name we specified in the custom function along with the corresponding value for that key:

Enter the Custom Field key/value pair

Enter the Custom Field key/value pair combination

The Result

If all went well, you should now see the specified style sheet in the page source:

custom-field-inserted-into-page-source

Congratulations! It’s a success!
Resources