Your Uncommonly Amazing WordPress Tech Partner

How to create a Facebook style feed with Elementor

facebook feed

Introduction

So you want to make a page that looks like Facebook's feed and is easy to maintain and to update with new content? Well, it just so happens that this can be done with WordPress and it's easier than you might think! 

Required plugins

In order to do this we need to make something called a “Custom Post Type” using a plugin called Toolset. Any plugin that allows you to create custom post types will work. The CPTUI plugin is another excellent and free choice).

Then we'll style the result with Elementor. You've probably heard about Elementor by now since it's become a super popular page builder very quickly. However, if you use another page builder like Thrive or (in our case) Divi, that will work too.

You'll also need a plugin to replace the featured image of the posts with a video, and for that we use Featured Video Plus.

To start, please install and activate the plugins mentioned above. When you've done that, simply follow the list of steps below! 

Tutorial

1 – Once you install Toolset, you'll have a new menu item in the left sidebar menu of your WordPress dashboard called “Toolset”. Hover your mouse over it and click “Post Types”, as you see in the following screenshot:

af ef ea d aa eb ee f c b Image at PM

2 – Here we have to create a new post type and we do that by pressing “Add New”:

f a ede d Image at PM

3 – Now you should be able to see a form like this one:

Image at PM

In the respective fields pictured above, you now have to add the name and the slug (the “slug” is the URL address of the page and the posts. For example, if your site is https://examples.com and you've named your slug “kitty”, the resulting URL for that post type would be https://example.com/kitty/your-post-title). You don't have to change the Labels if you don't want to because by default they will use the name that you insert.

Important: make sure that you enable the featured image for the post type. You do that by scrolling down to “Sections to display when editing this Post Type” and ticking the “Featured Image” checkbox as you see in the following screenshot:

f e fa b a f b f caf Image at PM

 

4 – Right now, after filling the top form and activating the featured image we are done with the post type and we have to save it.

ede c b b f c e fe Image at PM

 

5 – Now we are getting to the creative part, we got to make a template for our new post type, and we do that with Elementor. We have to hover over the “Elementor” menu item in the left sidebar menu and click “My Templates” as we see in the following screenshot:

a d cca a fe edeaec d Image at PM

6 – Here we have to create a new template and we do that by pressing the “Add New” button.

7 – On the popup, we have to select “Archive” or “Single” depending on what we want to design. If we select “Archive” we will design the archive page, the one that shows all the posts. If we pick “Single” we will design the post page template. After selecting what we want to edit and after giving our template a name we press “Create Template” as you can see in the following screenshot:

f eaa e fa fd aa e e Image at PM

8 – After doing that we will be redirected to an Elementor design page where we can style our template however we want. And of course if we want to style the post template (in our case) we will have to repeat the previous step and instead of “Archive” select “Single”.

9 – Now for the featured video functionality, we have to activate the plugin that we recommended at the beginning of this article Featured Video Plus and if we edit one of our new posts or even a WordPress page we should be able to see this box on the right:

d a f a acaf f dd Image at PM

10 – Now just add the video URL and you should be ready to go. Your post should have the featured image replaced with the video you just entered!

The result is that we've made a new post type for our content, styled its templates without having to do any kind of custom coding (always a bonus!), and we've replaced the featured images with featured videos. 🙂 

Video tutorial

If you prefer to follow along with a screencast or want to check your work against ours, here's a video tutorial that demonstrates the process above. Enjoy! 

How was your experience?

How was your experience setting this up using our tutorial?

Please let us know if the article was helpful to you in the comments section and if you would like to share some of your new post types designs with us we would be more than happy to see links to them in the comments.

And if you'd like us to set this all up for you, check out our MemberFix service! 🙂

 

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
MDBA’s purebred dog registry ran on an outdated Joomla site where every member registration was manual. We migrated to WordPress and MemberPress and turned days of back-and-forth into one guided

Most education businesses are built to sell. Supreme Ecom is built to retain – and the gap between those two things explains most of what AC Hampton has figured out

Learn how to add a mandatory multi-step Terms of Service to the Memberpress checkout form using the Contact Form 7 plugin…

Leave a Reply

Your email address will not be published. Required fields are marked *