Creating One to Many Relationships with Elementor and WordPress

How to create One to Many Relationships with Elementor and Wordpress

This article explains how to add Model Relationships or One to Many relationships in WordPress using the Elementor framework in under 10 minutes.

Such relationships could be Books to Authors, Students to Courses, Components to Suppliers, and much more. It is meant to provide a solution when creating a taxonomy is not the right way.

This example uses the default Posts Widget provided with the Elementor framework. It’s straightforward and easy to implement, and I’ve done the dirty work for you 🙂

Quick background before we start

This article was written in the late COVID-19 quarantine period, during which I rebuilt a website for my parents (initially built 6 years beforehand…). They own an E-book publishing business with hundreds of books and authors. We wanted each book and author to have a separate page with details, custom fields, and more.

Going to the usual Post Type with Taxonomy path for books was not enough, and I preferred a separate post type for each.

My background is heavy Python web development, developing large web applications where this type of relationship is usually peanuts.

Searching the web, however, for implementing relationships in WordPress wasn’t this simple and intuitive to my surprise

Our bucket list

When I read posts, I love having everything in front of my eyes before diving in. I’ll explain thoroughly later on, but if you want a head’s up, these are the plugins you’ll need installing.

All the needed code is ready for you on Elementor Relationships on GitHub.

  • Elementor & Elementor Pro is one of the best page builders out there for WordPress, highly recommended.
  • MetaBox is an awesome plugin giving you custom Meta boxes in the Admin panel. MetaBox has many premium features, but everything here is the free version.
  • MB Relationships is an extension that creates the magic and gives us the needed relationships equipped by real thorough documentation!
  • MB Custom Post Types allows to create custom Post types (books, authors…) without code, or my favorite PHP way by adding some code to your functions.php in your theme, and of course sample code here (too long to embed… lol)
  • Elementor Relationshipsis the plugin I wrote that allows you to query relationships using the Post widget.

Creating Relationships

After installing the necessary plugins, in your theme’s functions.php, define the type of relationship you want and give it a name, which will be the relationship ID

relationships definition


<?php

add_action( 'mb_relationships_init', function() {

    MB_Relationships_API::register( array(
        'id'   => 'books_to_authors',
        'from' => array(
            'object_type'  => 'post',
            'post_type'    => 'book',
            'admin_column' => 'before title',  // THIS!
            'meta_box' => array( 'context' => 'normal', 'title' => 'Book Author' ),
        ),
        'to'   => array(
            'object_type'  => 'post',
            'post_type'    => 'book-author',
            'admin_column' => 'before title', // THIS!
            'meta_box' => array( 'context' => 'normal', 'title' => 'Books' ),
        ),
    ) );

} );

We’ve just created a relationship between book to book-author, whose id or name is books_to_authors.

Adding / Removing items (books to authors) and more will now show up on the Post Editing page.

Querying with Elementor Posts Widget

Image for post

The easiest way to display items in Elementor is using the default Post widget.

The problem is how to get all books of an author or the author of a book using it. These queries are similar to taxonomy queries (all the posts in a category), but it doesn’t work for our new One to Many relationships as in this case.

Elementor has tons of extensions and hooks, but finding the right spot to integrate is the tricky part. On my search, I stumbled on this plugin, which gave me a good direction.

In my plugin Elementor Relationships you have the necessary bits of code, add and activate the plugin, and you’re good to go.

Come on, let’s do it!

After adding Elementor Relationships plugin to your site, creating new post types, and defining a new one to many relationships we can go to our Elementor Post Widget and see the results!

Create a new page, add the Post Widget, go to the query section. Under Advanced Query Options, choose Posts with Relationships.

Choose from the dropdown the relationship name (ID) you want to query.

Based on the currently displayed post ($post), define the relationship direction and choose which model you want to query.

Inside a book page:

  • Query Authors by books_to_author From and get the author of the book
  • Query Books with books_to_author From Siblings and get all the other books by the same author!

Inside an author page:

  • Query Books by books_to_author To and get all the books by this author

via GIPHY

Final Thoughts

There were many other possible implementations for these use cases. However, going this way was really easy and user friendly. The final result is really slick.

I hope this article and code will help you on your Elementor journey to create better websites!

If you have any feedback or ideas to improve please share them with me!

Join My Journey Into The New Economy

Stay up to date on Web3, NFTs and Crypto,
curated just for you.

Guy Eshet

Guy Eshet

Guy Eshet is an expert in Blockchain technologies, NFTs, and Web development. Guy has been developing software for over 15 years, currently focusing on Web3. Guy is fluent in 5 languages, loves meeting new people, learning about various topics, and improving his skills.

Share this article!

2 Responses

  1. Hi Guy

    Loving the plugin, it has saved me hours and hours!

    One question, if I want to sort my related posts by the order in which they are saved against the current post. Is that possible? Nothing I try seems to work.

    Thanks
    Marcus

    1. Hey Marcus,
      I just looked at their documentation. When creating a new relationship, every relationship has an additional ‘order_from’ and ‘order_to’ saved with it.

      Using it, you can sort relationships by the order you added them to the post.
      However, you might have to add some tweaks to the Elementor Relationships plugin, so I’d look into these fields first.

      First, look at the relationships table in MySQL and ensure this field is present.

      From there, you’re all set 🙂

      P.S
      A link to the code
      and the documentation:

Leave a Reply

Your email address will not be published.