Creating One to Many Relationships with Elementor and WordPress

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 to install.

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 excellent 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 with real thorough documentation!
• MB Custom Post Types allows you 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 Relationships is 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 appear on the Post Editing page.

Querying with Elementor Posts Widget

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 many extensions and hooks, but finding the right spot to integrate is tricky. 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 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 easy and user-friendly. The final result is 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!