Everyone who works with WordPress knows that custom fields are just awesome. No matter how hard we look, there is little chance of finding the perfect theme that has absolutely everything we want.
Recently, it hit me that I might want sources for photos and articles that I use for some post displayed at the bottom of the posts. It’s only fair to their authors, right?
I could have done it in the old fashioned way – inserting a link at the end of the post, or with the old custom fields plugin I recommended in a previous post. But to be honest, I felt like trying something new.
So I got Advanced Custom Fields by Elliot Condon. While I have tried similar plugins before, let me tell you, this one rules. It’s highly flexible, it has all the custom fields you can think of – yes/no, with or without image uploads etc. It’s just yummy. On top of it, Elliot offers some paid add-ons that you might find useful. Greatest by far is the Repeater field. Basically, this is a field that can accommodate many other fields and if you want to have more than one set, you just add a new row. Awesome, right?
So, I got the free Advanced Custom Fields plugin and paid AUD 25 for the Repeater field. I installed the plugin and entered the Repeater field license key. Now I was ready to rumble.
First, I created the big-fat “Sources” field. In rules, I selected “Post type is equal to post”, position – Normal (to display it under the post edit main box instead of the right-hand column where the Categories and Tags metaboxes are).
I also checked the “Standard Metabox” and “Content Editor” in the “Show on Page” section.
Now it was time to add the subfields. First, I want to display the sources only if they exist, right? So I needed a little condition there. I created a “True/False” field asking if I want to “Display sources?” (field key “display_sources”).
Next, I added a Repeater field. In it, I needed to have a “Source Link” (source_link) and a title field “Article/Photo Title” (article_photo_title). The Source Link field is a simple text field where I would paste the link to the photo/article I borrow, while the title field is a wysiwyg field with basic text formatting where we can type whatever we feel like.
I chose this option because I am still playing around with the theme, and I couldn’t know at the time how the default style of my new toy would look, so I wanted to have more options than manually styling everything (css can be boring).
Okey, dokey. Time to write the code that will display the Souces field.
As I said, I wanted the sources at the end of the post. For reasons that I didn’t feel like investigating at the time, some of my links were displaced (popping in the sidebar) when the code was inserted in the post template. It could be a theme hiccup, but it was a bit annoying. As such, I decided to display the sources through a widget. Of course, the widget needs to accept PHP.
This is where a new toy (new for me) came in – a plugin called Enhanced Text Widget. I also needed a way to pull the widget inside the post via shortcode, so I installed and activated Custom Shortcode Sidebars.
I created a custom sidebar “Inpost”, I pulled in the Enhanced Text widget and typed in this code:
<?php if(get_field(‘display_sources’)): ?>
<h3>Sources:</h3>
<?php while(the_repeater_field(‘sources’)): ?>
<a href=”<?php echo get_sub_field(‘source_link’); ?>” target=”_blank”><?php echo get_sub_field(‘article_photo_title’); ?></a>
<?php endwhile; ?>
<?php endif; ?>
Short explanation of the code:
<?php if(get_field(‘display_sources’)): ?> <h3>Sources:</h3>- it’s a condition to display the title “Sources” and the source links only if we mark the box to display the content of our new field.
<?php while(the_repeater_field(‘sources’)): ?> orders the execution of the Sources repeater field in the following manner:
<a href=”<?php echo get_sub_field(‘source_link’); ?>” target=”_blank”> </a> – this makes our Title a link that opens in a new tab/window.
<?php echo get_sub_field(‘article_photo_title’); ?> – this pulls the title.
<?php endwhile; ?> and <?php endif; ?> close the while and if statements so we don’t get some crazy errors.
Next I placed the shortcode of the Inpost custom sidebar at the end of the post and that was that.
I intentionally left the links to the various plugins out of the post. I will add them with my new widget, via shortcode. See the result below.
