mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

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:

af17241ef55ea3d2aa8eb4ee587f6c6b Image 2019 01 12 at 7.31.02 PM - How to create a Facebook style feed with Elementor

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

530f769a04ede862d519923102219481 Image 2019 01 12 at 7.34.24 PM - How to create a Facebook style feed with Elementor

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

Image 2019 01 12 at 7.45.35 PM - How to create a Facebook style feed with Elementor

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:

f3e5fa4b0a1f217679792b8f40caf006 Image 2019 01 12 at 7.50.17 PM - How to create a Facebook style feed with Elementor

 

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.

ede5c2b09067375b221f769c89e71fe3 Image 2019 01 12 at 7.53.13 PM - How to create a Facebook style feed with Elementor

 

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:

478573a8d32cca30a1fe5edeaec2d786 Image 2019 01 12 at 7.56.54 PM - How to create a Facebook style feed with Elementor

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:

f18eaa9e6584fa11fd41068aa8e9847e Image 2019 01 12 at 8.06.06 PM - How to create a Facebook style feed with Elementor

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:

6d195856a8139f0a04acaf209f79dd87 Image 2019 01 12 at 8.14.30 PM - How to create a Facebook style feed with Elementor

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.
Learn when it makes sense to use WordPress page builders (Elementor, Divi, etc.) versus custom page templates, and the pros and cons of each!

If you’re using ThriveCart and MemberPress together, you may have noticed that the native integration is somewhat incomplete. You often need to use Zapier zaps to achieve additional functionality, and

Learn how to integrate Invision Power System to Wordpress via SSO.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments