Creating 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.
However, searching the web 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 be installed.
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 Relationships is the plugin I wrote that allows you to query relationships using the Post widget.
After installing the necessary plugins, in your theme’s functions.php, define the type of relationship you want and give it a name, the relationship ID.
What we’ve just created is 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
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.
That’s it. You’re done!
For these use cases, there were many other possible implementations. By going this way was really easy and user-friendly. The final results are really slick.
I hope this article and code will help you on your Elementor journey to create better websites! You can check out more tips and hacks in my blog, geshet.io, where I share my dev journey.
If you have any feedback or ideas to improve, please share them with me!