How to Create a Movie Review Website With ACF & Elementor

In this Custom Post Types tutorial, you'll use Elementor's integration with the Advanced Custom Fields plugin to create a movie review website.

When building rich-content sites, a movie review site for example, many users opt to use a pre-made theme already containing the relevant layout & demo content.

The problem with such an approach is that pre-made themes restrict you to a certain limited design. Instead, we will show you how to use Elementor’s integration with Advanced Custom Fields to create a custom-made movie review site.

The website will feature the archive template, containing a beautiful full-width grid of movies, each with an image and title that is pulled dynamically from our custom post type content.

You will combine the ACF and CPT UI plugins to create a custom post type with relevant custom fields. This content will be displayed using Elementor’s single and archive templates.

For each movie post, you will include the movie title and trailer, followed by the plot and the IMDB rating. Below that, you will set a quote about the movie followed by the written review. Next, you will have a box with the movie image and some general information about the movie like the country, genres, and writers. On the right column, you will have a sidebar showing our latest movies.

Let’s jump into WordPress and build that.

Required Plugins

Inside the WordPress dashboard, I already created the header and the footer. In the dashboard, Under ‘Plugins’ > ‘Installed Plugins’, we will see the required plugins for this tutorial:

Note that Elementor officially supports Advanced Custom Fields version 5 and up.

Step 1: Create the Custom Post Type in CPT UI

Let’s start with our custom post type. Hover over CPT UI and click on ‘add/edit Post Types’.

On this page, you need to provide some basic information about your custom post type. First off, add the post type slug, which is the internal name WordPress uses for the custom post type. The slug should not contain spaces and should be lowercased. Go ahead and name it ‘movie’.

Next, fill-in the plural and singular label. Name the fields ‘movies’ and ‘movie’. Don’t worry about the other fields below. Those are just some labels and the defaults are perfectly fine here.

Change ‘Has Archive’ from false to true, so you can build an archive for this custom post type. For the ‘Menu Icon’, paste ‘dashicons-tickets-alt’. This is the icon for the custom post type that will be displayed in the left side.

Make sure that the featured image is ticked-on, because it should provide an image for the custom post type. Click ‘add post type’. You will be able to see on the left side that the custom post type movies was added.

Step 2: Set Custom Taxonomy Using CPT UI

Create a custom taxonomy for your movies custom post type. Taxonomies are like tags or like categories, but in this instance, provide a different name – ‘movie genres’.

Hover over CPT UI and click on add/edit Taxonomies. For the taxonomy slug, write ‘movie_genres’ with an underscore and with lowercase letters. For the plural labels, use ‘movie genres’ again. For the singular label, use ‘movie genre’.

Now attach it to your movies custom post type, and click on ‘Add Taxonomy’. If you hover over Movies you can see the Movie Genres. 

Step 3: Create Custom Fields Using ACF

On the Left sidebar, hover over Custom Fields and click on ‘Field Groups’. Click on the ‘Add New’. Call your field group ‘Movie Fields’.  Click on ‘add field’. The first field is going to be the trailer link so the trailer will play on the frontend.

Label this as ‘Trailer Link’. The next slot ‘Field Name’ is automatically filled in. For the field type, change it from text to URL. The second field is going to be the plot, which is a short description of the movie. 

For the field type, select ‘Text area’, because that’s a small paragraph and it’s better than a single line. For the rows, change it to 4, so it’s a bit smaller. The next field is going to be the IMDB rating. You will later pair this field with an icon box widget (in Elementor) to have an appealing visual presentation of the field.

Name this field ‘Rating’, and change the field type to ‘Number’. Select a minimum value of zero and the maximum value of 10. Now that all your fields are in place, scroll down and set the location rules to ‘Show this field group if the post type is equal to’ > Movie.

To activate the custom field, hit publish.

Step 4: Add Movie Genres Taxonomies & Movie Posts

If you add a new movie, you will notice the fields you previously added. Go ahead and add the different genres: Action, Adventure, horror and so on.

It’s time to add a specific movie entry. Under movies, click on ‘Add New’, write the title: ‘Gravity’, and add the rest of the fields. For the movie genres, we choose Drama, Sci-fi and Thriller. Also, set featured image. Then click on publish.

Now if you visit this movie post, you will be able to see that the page was created, but does not display any custom fields. This is because by default your theme does not display custom field. Here is where Elementor and its single post template come into play, allowing us to have an easy way to display custom fields.

Go ahead create a bunch of other movies so you have what to work with.

Step 5: Build the Movie Archive Template

Hover over Elementor and click on My Templates. Click on ‘Add New’ and select ‘Archive’. The library panel opens on the relevant blocks for the archive, but you don’t want to use them. 

You need to set the preview for this archive, so click on the eyeball icon > settings. You will preview the dynamic content as your movies archive. Click ‘Apply and preview’.

It’s important to include the Archive Posts widget, which will display our list of Custom Post Types created with CPT UI and ACF. When you hit publish, you will see the display conditions screen. The condition you will use will include the movie archives.

Your archive is live! You can visit the website and see the list of movies.

Step 6: Build the Movie Single Template

If you click on one of the movies, you will see a page with the default post theme structure. You have to build our single template to display the fields correctly.

Under Elementor > My Templates, click on ‘Add New’. This time select the single template.

You will see a new input for the post types, where you can choose ‘movie’. 

The widgets that will integrate with the ACF custom fields include:

  • The Post Title widget – Set to default
  • Video widget – With the URL set to Dynamic > ACF URL Field. Under Settings, for the key, select ‘Trailer Link’
  • Heading widget – With the Title set to Dynamic > ACF Field.  Under Settings, for the key, select ‘Plot’.
  • Icon box – With the Title & Description set to Dynamic > ACF Field. Under Settings, for the key, select ‘Rating’.
  • Heading widget – With the Title set to Dynamic > ACF Field.  Under Settings, for the key, select ‘Quote’.
  • Post Content widget – Set to default
  • Featured Image widget – Set to default
  • 6 Heading widgets – Using the rest of the movies custom fields (Country, Director, Writers, Stars, Awards, and Duration).
  • Heading widget – With the Title set to Dynamic > ‘Post Terms’.  Under Settings, for the Taxonomy, select ‘Movie Genres’.
  • Posts widget – Under Query, change Source to ‘Movies’. Exclude the current post and switch on ‘Avoid Duplicates’.

The display condition screen is already set for the movies custom post type. Click on publish and your template is live. When visiting one of the movies, you can see that your template appears, just like you designed it.

As you can see, it’s easy to create a movie review website using ACF and Elementor Pro. If you have any questions, don’t hesitate to leave them in the comments below.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,353,229 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


24 Responses

  1. This should be a bit easier with Pods… shouldn’t it. As Pods already includes the Custom Post Types. i own a copy of ACF and use Pods. It would be great to also listen to an interview with Pods creator Scott and the integration. Apart of this request … much appreciated and powerful stuff (because visual).

  2. While all that has been exhibited in this post is great, there’s one extremely important aspect of building sites with such custom content types that’s sorely missing: displaying relationships.

    In this example, such a site would likely also have actors as a CPT, and using the excellent relationship field of ACF, you could add a bunch of actors to a movie. Similarly, while editing an actor, you could add their movies.

    Then on the actor’s single view, you’d show the movies they’ve starred in, and similarly on a movie’s single view, you’d show the actors starring in it.

    Unfortunately, Elementor’s current ACF integration doesn’t allow that. Its support for the relationship field is extremely limited to only retrieving the URL of the related post, and even that works only if there’s just one related post, and not if there are multiple ones, as would be the case with movies and actors.

    Even for cases where the relationship is a single post (such as a single author for a book), you only get to retrieve the URL, and while you can assign the URL to let’s say a button, you can’t use its title to dynamically populate that button’s title.

    What we need is the ability to display all related posts from a relationship field just the way we’d display a list of any other posts.

    The most logical way to implement this that I can think of would be to allow us to use ‘ACF Relationship’ as a dynamic source for the Posts widget, and then select the particular relationship to use. This would eliminate the need to create a new widget for it altogether, nor would it require creating separate styling options, as the Posts widget comes with those already.

    And for relationships with single posts (or the post field in ACF rather than the relationship field), we should be able to use not just the URL but also the title (and possibly the featured image, excerpt, content etc.) so that we could dynamically assign those to other widgets.

    I hope you’ve already got this on your roadmap but in case you haven’t, please add it so that we could utilize the full potential of building such sites with ACF. (Same would go for the relationship fields of Pods and Toolset.)

  3. Thanks for this very useful video! I have the same question as Max above. I want to implement Custom Post Types on some of my websites and after doing some research, I was about to install Pods. Now I see you’ve used ACF and CPT UI and was wondering which option is better…

  4. I was looking to create a movie review site and after watching your guide i am simply loving this. I am testing some features of your free version to get familiar with interface.

  5. Hi Ben, I’m so glad I found this tutorial because I saw the single post page in this article at #5:, and this would be perfect for my blog.

    My question: In that article they have an italic blockquote whose left margin is quite a bit to the left of the main body text. Is that already built into what you show us in the video? Because I don’t see it. I just would like to know if it’s easy to do myself or if you can give me a quick description of what to do to get it.

    I don’t want to take up much of your time, but that blockquote possibility is what made me go searching for this template, and finally led me to you.

    Thanks for your time.


  6. Hi,
    thanks for your post, very helpful!

    Is possible to create a testimonials star rating icons on frontend with elementor and acf?

  7. This was a good tutorial, I have one question? As we can place the taxonomy (movie genres) name in post, is there anyway we can place the taxonomy image with it as well? …

  8. Nice tutorial. I don’t know if I missing something, but how did you display the archive page from the movies menu ? In others words, how do you configure the movies menu in your header ?

    1. I added a new “movies genre” called “all” and also add all movies to this genre. Afterwards, I created the menu “Movies” calling the “all” genre.

      Is that right ? or is there an easier way to do that ?

  9. Thank you a lot! Do you have any tutorial how to build a backend filter (for ex. to find the most popular movies or movies of 2011-2019 years or only drama movies)?

Leave a Reply

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

Want to learn how to build better websites?

Join 1,353,229 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.