Once you have installed the CFS plugin within your WordPress site you can get started by adding the shortcode directly into your favourite page editor and templates.
Custom Fields Shortcode has been created to work straight out of the box without needing extra plugins to work with your existing plugins, editor or tools.
Let's say you have a new WordPress post that has a post meta field named favourite_color associated to it and you've set the value to orange. Let's quickly add the shortcode to show the value on our post page.
[get_custom_field key="favourite_color"]
That was pretty easy and this works the same if you use Advanced Custom Fields. You may be wondering how it got the favourite color as we hadn't set the post ID? Well, the shortcode will get the current post's ID by default but we can specify a different post ID should you wish to display post meta across different posts.
Using the example above, we can get the value of favourite_color that is set on another post, let's say we want to get it from a post where the value is set to blue, let's now add a id attribute to our existing shortcode.
[get_custom_field key="favourite_color" id="223"]
You can also pull in Post Content in the same way that we pull in post meta. Let's say we want to pull in the post title.
[get_custom_field key=":post_title"]
Where we use content from the Post we prepend the key with : to indicate that we want a value from the post object. Now let's do the same thing again but we want to get the date that the post was created, in this case let's use post_date.
[get_custom_field key=":post_date"]
So this will return something like 2020-01-01 12:00:00 which is great, but it's not very easy on the eye, so let's touch on the preset filter Date Format to show the date in a nicer format without having to write any code.
[get_custom_field key=":post_date" date_format="D M j Y"] //Sat Jan 01 2020
Awesome, without doing very much at all we have make the date much easier to read using the standard date format.
There are a number of filters you can use right out of the box after you've installed the CFS plugin, let's take a look at each one with a demonstration for reference.
The filter object is accessible as an argument within a WordPress filter. You can access post content, attributes and more.
| Property | Type | Info |
|---|---|---|
ID |
Integer | The Post ID |
key |
String | The key specified in the shortcode |
value |
Mixed | The content of the post meta or post object |
attr |
Array | An array of attributes passed in the shortcode |
Easily format a date/time string using the standard date format.
[get_custom_field key=":post_date" date_format="D M j Y"] //Sat Jan 01 2020
Check out Use Post Content to see why this example contains : character.
Replace all occurances of a word or number. Let's say your clients blog talks about WordPress but they always quote it as wordpress, rather than manually updating them yourself you could use the Find & Replace filter.
[get_custom_field key="some_meta" text_replace="wordpress,WordPress"] //...and that is why my WordPress website is built in WordPress version...
Hide content if it doesn't contain an occurance or a specified word or character.
[get_custom_field key="favourite_color" text_contains="pink"]
Format a text string.
[get_custom_field key="favourite_color" text_format="uppercase"] //ORANGE
[get_custom_field key="favourite_color" text_format="lowercase"] //orange
[get_custom_field key="favourite_color" text_format="base64"] //b3Jhbmdl
[get_custom_field key="favourite_color" text_format="md5"] //fe01d67a002dfa0f3ac084298142eccd
Using WordPress' awesome hook system you can add custom filters really easily. Let's say we want to include the words "My favourite colour is N" whenever we output the favourite_colour field, to do this we would first create a new filter.
add_filter('my_favourite_color', function($data) {
/* Check the colour is set */
if(!empty($data->value)) {
$data->value = "My favourite color is {$data->value}";
}
return $data;
});
Let’s say that you’re creating a site in Elementor and you have a loop template that lists out all posts under the category “Food”, you set the loop template to the post title. This is the what the page would output.
Now, let’s say you want to include the sauce which is the custom meta field sauce within each post. As some of the food items do not have a sauce, you may end up with something like this..
As we can see from the example above, some posts such as Beef Ramen doesn’t have a sauce associated with it so in order to hide the “Sauce” label we would have to add some extra functionality to check this.
Instead, we can simply create a filter to do this conditional logic really quickly. Let’s edit the loop template so that it looks like the following:
<h1>{Post Title}</h1>
[get_custom_field key="sauce" filter="get_sauce"]
Notice that we’ve included the shortcode and specified that we want to get the key sauce and we haven’t set the label “Sauce” anywhere in the template. We’ve also not specified a post ID because we will use the one within the loop and we’re calling the filter get_sauce. Let’s create a new filter with the get_sauce name and render out the page again.
add_filter('get_sauce', function($data) {
/* Let's check if there is a sauce value */
if(!empty($data->value)) {
/* This post has a sauce, lets update the value.. */
$data->value = "<p>Sauce: {$data->value}</p>";
} else {
$data->value = "<p>No Sauce</p>";
}
return $data;
});
Our page will now display..