Using Custom Fields Without Coding
Custom Fields – A very important feature in WordPress development – often left unused for the complexity in usability. You must have the following pre-requisites to exploit this powerful feature in WordPress:
- Good knowledge of PHP.
- Good knowledge about WordPress file structures.
- How WordPress loop works.
When I started using WordPress couple of years back, it was really fun. So many themes, so many plugins – it was a great experience altogether. Then came the hard part when I got my first project which required some theme editing and dreaded (at that time at least) usage of custom fields. It eventually worked out but from those moments onwards, it was roaming in my mind why it is such a complicated process to use such a powerful thing like Custom Fields?
It would have been great, if the Value of Name-Value combination can be used as a shortcode in posts or pages.
As I was going through the options available about the usage of custom fields, I came across a nice blog post from elegant themes – How To Create WordPress Custom Fields. This post mentioned three most popular plugins – Advanced Custom Fields, Pods & Toolset Types. These plugin are quite powerful – but again there comes the coding part – as I was in search of a codeless solution which can be used even by a nontechnical WordPress user!
As I was digging in the technicalities of the usage of custom fields, I zeroed on a single line of PHP code which is being used to refer the Value of Name-Value combination!
<?php echo get_post_meta($post->ID, ‘author-link’, true); ?>
Where author-link is the Name part of Name-Value combination.
Resource:
Now I started looking to find a way to convert this single line of PHP code to a shortcode. Does it ring any bell? Yes, you are going to find a lot of plugins in wordpress.org plugin repository which claims to have this kind of functionality. Unfortunately, I couldn’t find a single such plugin which fulfills my criteria. Finally I retrieved a plugin from my personal repository (whenever I use a plugin, I keep a copy of it in my computer) named Shortcode Exec PHP – which successfully fulfilled my criteria. Unfortunately, this plugin is not anymore available in wordpress.org plugin repository anymore, you may download it from here. This wonderful plugin was created by Marcel Bokhorst.
Procedure:
We are going to create a post which will contain a couple of custom fields. Let us consider, we want to put author’s name and author’s photograph inside the post.
1. Create a post with the some text content (Image 1).
2. Create two custom fields name-of-author & image-of-author. Put a name in the Value field of name name-of-author (Image 2). An image need to be uploaded in the Media Library beforehand and the URL need to be copied in the Value field of name image-of-author. If custom fields are not available below the post entry area, click on Screen Options at the top right corner of the screen and check mark Custom Fields (Image 3).
3. Now put the following shortcodes in the area where you need the name and image to appear. I put the name in left column and image in right column using the shortcodes available in Divi & Extra.
4. Save the post and view it. You will find a look like Image 4.
5. Now we are going to create the relevant shortcodes – [name_of_author] & [image_of_author].
6. We need to install the plugin Shortcode Exec PHP. If you are not sure how to install a plugin visit wordpress.org support page https://codex.wordpress.org/Managing_Plugins. On successful plugin installation, you shall find a new entry under Tools in WordPress Dashboard named Shortcode Exec PHP. Go to Tools -> Shortcode Exec PHP.
7. You are going to find a number of parameters to configure and below all of them, a section named Shortcodes. Of all the options, you need to change only one Add button to TinyMCE editor. (Image 5).
8. In Shortcodes area, there will be one demo shortcode displayed to illustrate the process. It may be deleted as it is of no practical use. Create a new shortcode name_of_author & put the following code echo get_post_meta($post->ID, ‘name-of-author’, true); Watch carefully about the use of dash (-) & underscore (_). Shortcode name should only contain the name with underscores (_) (Image 6).
9. Save the changes. You will find Save Changes button above the Shortcodes section.
10. Refresh the post again and now you shall see the value of custom fields appear in the post (Image 7).
I have used this method with Divi & Extra both the themes. Hopefully, it will work with other themes also.
