Hi, this is Russel from Low Fruit Solutions, and today, we’re going to be demonstrating the Related Articles feature of the Pro Blogger application.
The purpose of the Related Article feature is to essentially show more relative content within your blog, so what does that mean? That means that if I’m reading a specific article that is about a subject then your reader will see more articles related to the same subject, and that means that if you have a large and extensive amount of blogs, that that particular content will be pulled back across your entire set of articles.
So if I’m reading an article about swimming, and you’ve written a number of articles about water sports, the articles related to swimming or share tags with your swimming article and title etc will be pulled back accordingly, and that’ll keep your readers more engaged since they’ll be able to know, see, read things that are more relevant to what they started on or if something piques their interest, they could follow that and they can continue to engage over a longer period with your blog, and the longer people are on your blog, realistically, the more time you have to engage and to obviously make other offers to them. What does related articles look like? Well first, let’s see what it doesn’t look like. So here’s my demo store, I’m just gonna scroll down and click on one of these articles here.
This is on the debut theme, and if we look in this article here, you’ll see that it is just a standard article. It has no relation, no other, not even recent blogs are being displayed on here. So if I was reading this, I would just go on here, I would have to then exit the article, go back to leave the blog, search for what I was looking for, and then read it, which is not very efficient and you’re bound to lose people. So how do we enable related articles? Well, let’s just go to the dashboard of this UAT store. Then we click on apps, and click on ProBlogger. This is a UAT version because we’re on the demo store. Obviously, the (UAT) here won’t exist on the live store. We’re gonna scroll down to related articles, click Enable. We’ll come back to what all these settings mean in a short while. Hit Save, this should turn this bar green. As you can see, it’s been enabled. Now all the relative files we need have been copied across. Then what I like to do when I’m editing the code is essentially duplicate a tab. This gives you the ability to quickly swap back and forth when you’re referencing the instructions.
So we’ll go to step two, to the install. Now the first thing we must do for any item in ProBlogger is make sure we’ve done the general install. If you’ve already done this install as part of the one of the other features being enabled, then you don’t need to do it again. This is a one-time-only install. So we’re just gonna scroll down here, and we’re going to copy this section, the Include ProBlogger section wrapper. We’re gonna go back to our other tab, we’re gonna click on our online store. Now before this, we always recommend that you back up your theme as it gives you the quick opportunity to be able to roll back any changes should you make any mistakes or not like what you’ve done. Probably not so much with this change, ’cause it’s very fairly minimal, but for others, when you do an extensive amount of code change, it’s always good to either make a little change, save it, make sure that everything rolls, and looks as it’s expected, and then continue on, or to back up your theme and do your change, and if there’s anything wrong, then you can revert back.
To do that, you would just hit Duplicate on the actions menu here, and it’ll create a copy which you can then republish later. Anyway, let’s go to Edit Code on the actions menu, and we’ll see all our theme files and assets on the left hand side and the output on the right. We’re just gonna click on Theme.Liquid. And then after this <head> section here, we’re gonna do a carriage return, and we’re going to paste the ProBlogger Section wrapper code and hit save. So that’s the general install done.
We’re gonna go back here to the app. Just collapse that General Install in the Accordion. Go down to Related Articles, and there’s a whole bunch of instructions here, we are going to copy the most relevant item, which is this Include ProBlogger Snippet related articles. Copy it, we’re going to go back to our code editing window. Now for older themes, you’re going to want to edit the article.liquid, all right, and in this case, I’ve just opened the article.liquid as you can see in the top here, and you can see it references a section.
Now most new themes use sections, so you’ll see that it references this article-template, and the little piece in beginning here, section, tells you where it lives. So if I just collapse template, you’ll see that it’s in sections. Sections live in sections, and we’re gonna click on article-template. The key to knowing that you’re in the right place is that you will find this piece of code. It says article.content because what it’s telling you is the actual article itself, the content that you put in your blog is being delivered via this piece of text, and what we wanna do is after this closing this dev section, make a carriage return and we’re just gonna paste that Include ProBlogger Snippet related articles, and hit save. And we’re gonna go back to our blog, and we’re just gonna do a little refresh. And what we have here now is we have this responsive slider that is populated with articles that are deemed relative to this article. Now I’ll go into, in another instructional video, we’re going to learn how to build relationships between items and blogs, but this here now is the slider.
If there were more items in here, we’d actually go responsive, but we’ll change that in the settings. So let’s go back to the app settings. So the install, you’ve done the liquid install. Very simple, straightforward. Hit Setup, let’s go to related articles, and go to what these mean. Well, first of all, we’re gonna just change some of the display items. So the slider header here, what that is, is the text, this piece of text here that is sitting above your slider. Now, related articles is all very well, and it means what it says. But if we wanted to make it a little bit more engaging, we can change that text to, in this case, because our blog is very fruit-orientated, so More About Fruit as an example.
Now the enclosed H4, these are standard HTML, so if you wanted to change that to a different type of header, in this case, we want to make it to a bigger one, let’s change the four to three, and then we’ll change things. Article content length. What this does, is it determines the number of words in your slider item. So if you look here, the number of words that are displayed in the slider underneath the header text here.. If you wanted to look a little bit less busy, you can change down the number of words, or if you wanted to include in more text so that you can give a sort of prelude to what the content is, you can increase it. In this case, we’re gonna change it to zero, we don’t want any text. Now the slider size is the maximum number of returned items.
So what that means is that when it goes off and looks for relative articles, what it does is it will find, in this case, a maximum of 10, and it will sort them by the most relevant to least relevant. In fact, what it does is it actually finds all the articles and sorts them, and then it takes the top number based on what this value is. So we’re gonna leave it as 10 because more value are good values, and the only time you decrease that is if you’re using it in the sidebar, and I’ll explain what that means in a minute, and the items to display is really the number of items that are currently displayed in the slider. So here we have one, two, three, four, five as it says here. Now what we’re gonna do is we’re gonna change it down to four and we’re gonna hit Save. This is to change the look, the actual display value of the related articles, so let’s have a look and see what changes have happened.
So I’m just gonna refresh, and let’s scroll down, and you can see now we have four items in the slider, and actually because we have five values, it’ll now slide. Now the slider is responsive, and now I’ll demonstrate what that means. It basically means it will shrink to the size of your window, so you can see there we’ve got, you’re now able to display three because you’ve crunched down the space and it’ll just slide through all the values. So we’re just gonna increase that back again. Going back to the other settings, what these portions mean are how it determines what is important, what are the matches. So title, now title means that there are shared components between the tags of your existing article and the titles of other articles. So if I, in this case, I have a tag of pineapple, and I say it’s the most important, then items that have the word “pineapple” in their title will be deemed very important.
So the scale here is from Not Important, which basically means ignore that value, Mildly, it effectively gives it a score of one, Very Important a score of five, Most Important a score of 10. It’ll add up all these scores to work out how much value an article has. So what we’re gonna do is we’re gonna change that to Mildly Important, we’re gonna change tags to being the most important, which means that the articles that have the same tags, so if one article A has pineapple and fruit and article B has pineapple and fruit, and everything else only has fruit, then those two articles have the most relevancy between them, because they share the most amount of text. Then we have author relevance. Now if you have multiple authors and you want to show things that are, if you have a specific guest author and you want their articles to show up, to be most important that they show their own articles as opposed to other stuff, even though they may have wide-ranging subjects, then what you would say is that it’s the most important piece.
In this case, say it’s mildly important because I think it’s more relevant that you show items across the blog that have shared characteristics because that way, you get the most out of your blog. So I’m just gonna change that, and what we should see here is we should actually see a change in the ordering of, actually because this one shares too much stuff, it’s gonna be the same, but the ordering here would’ve changed. So how else, putting related articles in the bottom of your blog is one way to do this. It may not suit your theme, you may want to put something else here, but you can also see the header’s changed as I have increased the size of it, and now there’s no text below. Another way to display the related articles is also in the sidebar, so here’s an example of that. Here’s a different theme, and it has a sidebar.
It doesn’t matter if it’s on the left or the right, and what we’ve done here is we’ve put it just underneath the existing menu items, so that way if you’re reading along, you can see that, you wanna put something else on the bottom or you feel like this is the right place to display related articles on the left-hand side, then we can do that. The trick for putting items in the sidebar is that you really needed to change one thing specifically, and that is the items to display needs to be one because otherwise, you’re just gonna run out of real estate because you only want one to display, and then everything else scrolled through. This is also probably the only time that you’d want to have less than 10 items in the slider, because otherwise you’re going to end up with 10 dots at the bottom here, which may look a bit busy. So you may say, “Okay, I only need, in this case, I’ve only returned four values to display this.” So the setting for that would just be Slider Size, change to four, items to display: one and then that would work for you.
Okay, that is the related articles slider install and setup. Thank you for your time, I hope you found it useful. We’ll have another video specifically on how to setup relationships, or more specifically, setting up your blog with tags, et cetera, so that you can get the best value out of it and a lot of other things. Thanks for your time. Cheers.
Check out more videos below or on our Youtube channel