Adding related pages and links in your articles

repeater fields madebydenis

Do you like the WordPress 'insert link' ability in your posts? Then you'll love this little snippet.

In my latest project, the client asked me if he could somehow link his other posts, and maybe some other links in his post like some sort of related links. The site is a news article one, so each author, if he so likes, can add his own related articles.

Naturally, one will require a meta box. I’ve built various meta boxes over the past year and a half since I’ve been developing WordPress themes. So the first thing that came to my mind was that I’ll need an input field. Ok, this covers the link issue, but how can I link related posts from within the WordPress? I knew that tinymce editor has the ability to link to existing content. This is an awesome ability to have, and since it’s embedded in the WordPress itself, there’s got to be a way to use this to my advantage.

Coding without knowing what you’re doing can lead you to more problems than it solves.

As any developer knows, first thing you do is: google. One of the beauties of the internet is that we have all the information right here on our fingertips. What our parents had to go to the library to find out, we can just google (or bing). You’ll see many developers out there complaining how there are many so called ‘developers’ that only take code from Stackoverflow, paste it in their code and claim it as their own. Without knowing what the code you’ve pasted in does, this is a seriously bad practice. Coding without knowing what you’re doing can lead you to more problems than it solves. But it definitely is a way to learn coding. And why should you waste countless of hours building out something from scratch, when there is a solution (or similar one) already available?

This little introduction was written because I googled and stumbled on a piece of code I could use. First one was repeater fields that I found on gist by user da1nonly. This provided the option to add many links if you want. Second one I found on wordpress.stackexchange.

Combining these two information, and modifying them, of course, I came up with a repeater fields with WordPress link posts/pages functionality.

Full code

Click on the code to copy all of it (in the ‘Toggle Plain Code’ mode in the upper right corner). This is a big chunk of code so let’s break it down a bit.

Meta box creation

First, you’ll create a meta box of course.

Next, you define your callback function for the metabox to render. In my case I’ve called it my_related_articles_meta_box_display . The ‘my_related’ is put as a function prefix. It’s a good practice to give your custom functions your unique prefix (I usually put the theme name as one), so that you don’t have accidental clashes with any plugins you may install later on. Also a good practice is to put if(!function_exists('my_related_articles_meta_box_display')){}  as a wrapper around the whole function. That way if the function is accidentally defined in some hook before ‘admin_init’, you won’t have any php errors. I’ve left it out because, well to be honest, I forgot. But the function name is really unique enough so that no errors should happen :D

In the callback function we define a variable for repeater fields, and a nonce field (better safe than sorry). After that we have javascript code that will determine what happens when we click on certain buttons, and the layout of the metabox. We have two on click events for adding and removing the repeated rows

And one sortable event, so that you can rearrange your fields as you see fit.

The javascript was added inside the php code, which may not be the best practice. It’s always better to separate your style, script and code into separate files and call them appropriately. But this will work too.

The adding link button was a bit tricky. First we look if the wp_editor  is loaded, because we need it to have the linking ability. Then we add event listeners – add link button on click. First we create a function to create an empty row. I’ve added the check to see if there is an empty field before adding one, if one is there you don’t need to add a new one; just add the value in the existing one.

_addLinkListeners() function had to be changed from the original. The default action of the add link button is to actually add the link in your content. So if you just pasted the code from the wp.stackexchange, you’ll end up having links in your input field in the metabox, and in the content as well. Tricky part is that the tinymce editor is loaded in an iframe. Luckily, this iframe is from the same source as where you are (your own blog in the backend), so you can safely fiddle with it (mainly the content that is written inside). This is why I added

you can search for the added links, and then just remove them from the content, while leaving them in the repeater field. Neat :)

The rest is just click events if you decide to cancel or to add the link.

Meta box save

Last but not the least part is the saving of the metabox.

First are the usual checks: nonce, if you’re not in autosave, and if you can edit the post in the first place. Then you get the post meta with repeater fields, and create an empty array where you’ll store your links and names. For every name field, you’ll add a pair of names and url, and then update post meta if your array is not empty, and not the existing one.

And that’s it. With help I found on line, that greatly shortened the coding time, and some modifications, I successfully created a new type of meta box for posts.

repeater image wordpress backend

The look of the repeater field. You can drag and drop it, add and remove it, and add link to internal posts and pages (click to enlarge the image).

So how do you use them in the single post? I like to add a check if anything is inside the fields before outputting it in the page (so that no HTML is being generated).

Where $post_meta = get_post_meta($post->ID); . Since they are saved as serialized array, you need to unserialize them first. Then you can output them out in a simple foreach loop:

Here I added the comment number for each post next to the icon (if there are any). Simple as that. Just be sure to close the if loop with <?php endif; ?> that you opened when you checked if there are any links in the repeater field.

I hope you liked this article. If you have any questions, ask in the comments below, and feel free to share the knowledge on :)

Join the Discussion