I found this resource provided by Hubspot about how to implement a related posts section, but we're looking for that to be both auto-populated and manually entered - so if there are 3 related posts, we can choose to manually select 1-2-3 of those slots or if we don't manually select them they'll be auto-populated.
Auto-populated posts will be determined by topic (or if on WordPress it would be determined by Category/Tag/Custom Field).
If we go this route on Hubspot through, we will be limited to only blog posts, correct? Could we have one of the 3 related posts actually be a website page?
It's important to note that I'm speaking more in terms of WordPress vocabulary about the difference between a "post" and a "page," because this related reading functionality is what will ultimately determine if we migrate our entire 500+ article blog into Hubspot, or if we need to stay in WordPress.
From their site, on the "Tour" page in the menu: "What’s better than related posts below your posts? How about blog posts with related products of your webshop? Or job listings with related jobs? With Related Posts for WP you can easily setup any post type to have related content of any post type you like. The possibilities are endless."
For instance, if someone reads a blog about branding, we'd want one of the related readings to be our "services" page for branding, or a case study that lives on our site as a specific page.
Let me know your thoughts, I assume that we couldn't hijack this functionality within Hubspot the same way we can with a WordPress plugin, which means we'll need to stick within WordPress.
The plugin looks to have some great functionality so i'll try to explain the process from an HS standpoint as much as I can.
HubSpot has a new design manager in beta currently and in it there is a new way of doing custom modules. In order to make what you want happen, you'd have to use this new beta and a custom module.
Ideally, you would create a module with a boolean (for either toggling auto-populate or manual).
If you have it be auto, you would then use something like the related posts from HubSpot's resources or using some kind of combination of the random filter on the blog_recent_topic_posts function. This should get you your automated showing of 3 relevant (recent) posts from the same tag.
If you have it set to manual, you can then use the new selectors from the custom modules of "Blog" and "Page" in a grouped field. You could then code it to where if you have a blog chosen to show that, if not, show a page.
For a blog, you could simply pull in the featured image of the post and all that info programmatically based on the blog you select.
For a page, you could include an additional image field to assign an image or if you are using a custom module on the page template, you may even be able to pull in that image from there along with the page titles.
It would look something similar to this
(note: just threw this together so it's more a 'this is an idea of how to do it' vs 'do this')
Your editors should then see the options grouped like so in the page editor:
You could go one step further and have repeater options (if you wanted to control how many to have 1, 2 or 3) or you can hardcode it to three if needed.
Hopefully, this helps point you in the right direction (whether that's HubSpot or WP). Let me know if you have any additional questions!
Just wanted to reply to you again as HubSpot just released a new tag for use in regards to related posts. I wrote a blog about it that explains it and shows some code examples of what you can do with it:
Great, thank you! I think we're going to need to keep our blogs in WordPress in order to preserve a more powerful related reading functionality (whether related reading is a blog, another page on our site, or other materials).
The plugin looks to have some great functionality so i'll try to explain the process from an HS standpoint as much as I can.
HubSpot has a new design manager in beta currently and in it there is a new way of doing custom modules. In order to make what you want happen, you'd have to use this new beta and a custom module.
Ideally, you would create a module with a boolean (for either toggling auto-populate or manual).
If you have it be auto, you would then use something like the related posts from HubSpot's resources or using some kind of combination of the random filter on the blog_recent_topic_posts function. This should get you your automated showing of 3 relevant (recent) posts from the same tag.
If you have it set to manual, you can then use the new selectors from the custom modules of "Blog" and "Page" in a grouped field. You could then code it to where if you have a blog chosen to show that, if not, show a page.
For a blog, you could simply pull in the featured image of the post and all that info programmatically based on the blog you select.
For a page, you could include an additional image field to assign an image or if you are using a custom module on the page template, you may even be able to pull in that image from there along with the page titles.
It would look something similar to this
(note: just threw this together so it's more a 'this is an idea of how to do it' vs 'do this')
Your editors should then see the options grouped like so in the page editor:
You could go one step further and have repeater options (if you wanted to control how many to have 1, 2 or 3) or you can hardcode it to three if needed.
Hopefully, this helps point you in the right direction (whether that's HubSpot or WP). Let me know if you have any additional questions!
I have no idea of coding and I have these blog posts . Wanted to create a section just underneath my blog posts for related posts. It should be placed horizontally. Right now I drgagged hubl module and copy pasted the code i just googled. But the posts look totally off . I want them to be nicely placed side by side horizontally. Please help.
@poojanadkarni1 that link is an internal link and I would need to be apart of your portal in order to view that. To get a preview link, please use this option below:
and paste the URL you get from the new window that opens with the preview.
It looks like HubSpots preview buttons are not working properly and generating wrong links. I was able to piece the link together from a past preview I had:
It looks like the content is pulling in fine, you just need CSS styling to make it look correct. I would recommend limiting the posts shown from 5 to 4 and then using the following CSS to make them float side by side:
.hs-hash-2043319997 li {
float: left;
width: 25%;
}
If you want to keep 5 posts, then you would want the width to be 20% instead of 25% (100 / # of columns).
You'll most likely have to do some more styling to get it how you want it to appear in terms of sizes and more but using the class of
.hs-hash-2043319997
should help you target you listing. If you wanted to target the header above, you should add a class to the module element and use that class to style your module. Hopefully this helps point you in the right direction.
Hey there, we never actually implemented this solution because the WordPress plugin we were looking at ended up being more powerful and suited our needs better. Our blog is staying in WP for the time being.