A client of mine asked me recently to build a standalone website for a conference/tradeshow they’d be displaying at, and one of the requirements in the spec was to pull posts from their main site (I’ll call it “source”) and display them in a rotating carousel on the new site (aka “target”). Each post had to display the featured image, title, and excerpt on the target and a button to go read the whole post at the source. So there were a few challenges here:
- Pull posts from an external site – an RSS feed is built for this
- Include the featured image. WordPress’ RSS feed does not include a field for the URL of the featured image.
- Display these posts
- in a carousel on the target
- linking back to the source
- and do this automatically when new posts are published to the source
The two biggest problems I saw here were the missing image field and being able to pull the posts, including those images, into a carousel. This is an issue because, since RSS doesn’t usually include an image, it seems nobody’s written a carousel that accounts for one.
Let’s get that image
So I tackled the image thing first. Now, it’s true that images embedded in the post body are referenced in the feed. I even found ways to take that image and make it the featured image in my carousel on the target site. That’s all well and good, unless that’s not the image that you want, which is where we were.
I found a couple of plugins that claimed to be able to do this, but I prefer to have simple functions handled with a few lines of code rather loading up yet another plugin. The Codex came to the rescue with this little snippet:
So that’s checking the posts to see if they have a post thumbnail and if so, dumping the URL for that image into a variable named
rss2_item function just echos that value into the feed for each post. Handy. You can use the same function to add anything else you like to your feed, like custom field values, &c.
Bringing the posts into my target site
I’m a big fan of WP All-Import. It’s a great tool for migrating sites over from other platforms (I’m about to move a site over from HubSpot, for instance) and it works really well for loading a lot of products at once if you’re building an e-commerce store.
In my case, I wanted to use its ability to pull an XML file from an external source, run an import formula to create new posts and import images on the fly, and do it all on an automated schedule. So I got that all set up and working first as a manual import. My posts were coming over to the target site, all the copy and images were there. But I had one challenge to solve yet.
Point back home
So I was now pulling the posts into my target site. I could use a carousel plugin to create my rotating list of posts, but that would create a new problem. Since the posts are now local, when a user clicked the link to read the full post they’d be taken to the post on the target site rather than the one over on the source site. The client wants to drive traffic to the source site, which will exist long after the tradeshow, as opposed to this one-page, short-lived site. I created a custom field to add to each post on the target site and called it
source_permalink. WP All-Import allows you to map custom fields, so I pulled the
<pubdate> from the XML feed and dumped it into this custom field.
Build the carousel
I’m finally ready to build my carousel. It was important that I have a carousel tool that’s flexible enough to give me a way to override the links that would usually point locally with the URL I have in my
source_permalink field. Like every site I build these days, this one’s done in Beaver Builder, which has a rich community of third-party developers. So PowerPack’s Content Grid to the rescue! This module has layout types of Grid and Carousel and a whole host of fine-tuning controls to be tweaked. Most important to me was the ability to create completely custom layouts, including BB’s ability to map various fields for each post into the markup. Here’s what I ended up with:(1)Alright, you got me. I used ACF for the custom field when not 200 words ago I said I prefer to use code for simple things. Meh.
Briefly, here’s what it does. It checks to see if there’s a featured image (there should be, but I don’t want to output the markup if it’s just going to be empty), it displays that image, and it adds a hyperlink from the image to the post on source. That’s the
wpbb post:acf type='url' name='imported-permalink' part. Then it displays the title linked the same way, a 25-word excerpt, and a Read More button also linked to source. All really easy to do when you have pretty powerful tools at your disposal. My carousel was done and displaying what I wanted to see.
Put it on a schedule
I mentioned earlier that All-Import has ways to set up automated tasks: automated, and manual. Automated scheduling is very simple: you choose the days and times you want the process to run, pay them $9 a month, and you’re done.
I opted for the free Manual Scheduling, which requires you to set up a cron job. If you’re unfamiliar, cron is just a server utility used to schedule commands to happen on a schedule of your choosing. The plugin includes the URLs you’ll need and a link to their docs explaining exactly how to do this. For many people it’s as simple as sending the URLs to your hosting company and asking them to do it for you. I use a free service called easycron to handle mine because it’s really easy to use. So now I have All-Import checking the source site every five minutes to see if there’s anything new; if so, it creates a new post and the next person to look at the carousel will see it.
One last hiccup
By default, RSS feeds always set publication time of each post to UTC (2)Zulu if you’re a pilot or in the military; Greenwich Mean Time if you’re old school, including feeds out of WordPress(3)I’ve found plenty of evidence that this is RSS default, but nothing definitive; if someone knows better let me know.. So instead of the timezone you chose in Settings-> General you’re going to get UTC. The result of this is that the posts were coming over from the source site with a publication date in the future, which means they’d show up hours later than expected.
For instance, this afternoon my client published new content to the source site. The publication date and time according to WordPress is
Fri, 15 Jun 2018 16:07:27. It’s live on the source site, because WordPress is respecting their time zone setting (EDT). But the RSS feed shows the pubdate as
Fri, 15 Jun 2018 20:07:27, an offset of four hours. That’s the difference between their site timezone and UTC. As I write this, that’s still a few hours away. Without fixing this problem, that post would be sitting there until this evening before going live. Not really what they’re looking for when they’re actively blogging about a tradeshow that’s going on right now. It took a bit of sleuthing to even figure out why the time was offset when the posts were imported, but with that figured out and a little help from one of All-Import’s support techs, I was able to work this out too.
All-Import has a function editor that allows you to run a PHP script when you run an import, and you can pass values from that to any of the fields in your import. So here’s what I added to the function editor:
With that script running, I’m able to pull the pubdate in the RSS feed, pass it through this function, and return the newly offset time back into the publication date field. And now my posts are publishing with the correct date and showing up immediately on the homepage.
It’s pretty amazing what you can pull off in WordPress by combining some powerful plugins and a little bit of code.
So that’s 1400 words on “I built this thing…” for this week. :p
Asides [ + ]
|1.||↑||Alright, you got me. I used ACF for the custom field when not 200 words ago I said I prefer to use code for simple things. Meh.|
|2.||↑||Zulu if you’re a pilot or in the military; Greenwich Mean Time if you’re old school|
|3.||↑||I’ve found plenty of evidence that this is RSS default, but nothing definitive; if someone knows better let me know.|