Publish to WordPress from Bubble.io with One Click! Forget Zapier and Save Hours Every Week

What if I told you that you could publish blog posts to your WordPress site with the click of a button from inside your bubble application? And I'm not talking about some complicated Xavier workflow that breaks every other week. Hey, I'm Dennis Lewis from Ratio.dev and after building hundreds of bubble applications over the past few years, I can tell you that most people are doing content management the hard way. But here's the thing that 99% of bubble developers don't realize. You don't need expensive third party tools or fragile connections. You can build a bulletproof system that creates WordPress posts directly from your bubble application using nothing but Bubble's native API connector. And I'm going to show you exactly how to do it in this video. We've implemented this exact system for clients managing many, many blog posts. One customer went from spending three hours a day on content management to 10 minutes. Another increased their publishing frequency by 400% because the friction just disappeared. And one of the uses of this is actually to use programmatic functionality in your bubble application to create SEO friendly blog posts. On a WordPress blog, for example, we've done this integrating with AI tools and making the entire workflow as seamless as possible. This is opening the door to a whole lot of different possibilities for you with your bubble application. In the next few minutes, I'm going to walk you through the complete step by step process. You'll learn how to set up WordPress authentication, create the API calls, handle images and media, manage categories and authors, and build workflows that never fail and stick around till the end. Because I'm giving you free access to our no Code Resource center with templates and plugins and frameworks that'll save you months of development time. Face it, if you're building any kind of content driven application in bubble it, you've probably hit the wall. Your users create amazing content inside your app, but they have to manually copy and paste it everything into WordPress if they want to put it on WordPress. We build a lot of logging applications directly with Bubble and they rank. And there's SEO friendly. But I also understand and appreciate that a lot of people want to maintain their content on a proven content platform like WordPress. So this gives you both alternatives. You can do both. In fact, we've created applications where you can choose I want this to go to the bubble side or I want this to go to the WordPress side and that you choose on the fly with all bim. What if your bubble application could be the content creation engine that automatically feeds your WordPress block. What if every piece of content created in your ad could instantly become a published post with proper formatting and categories and featured images and SEO optimization. And all of that can be done. Here's what we're going to build together. A complete WordPress integration that handles everything from simple text posts to complex articles. SEO optimization and the beautiful thing about doing this in bubble is that you have complete control. There's no monthly fees for third party services, no rate limits, no mysterious breakdowns. You don't have to pay Zapier. And it's not just about saving time, though. You will save a bunch of time. It's also about unlocking entirely new possibilities for your application. Let's jump into the technical stuff and get going. The first thing you're going to need is you're going to need to log into your WordPress dashboard. We're going to need to set up one option there so that you can actually communicate from bubble to your WordPress. And that is you're going to go to your WordPress dashboard to users. And for the user that you want to use to authenticate with, you're going to create an application password. Okay? And you'll just go and edit the user and you go down as his application passwords. Just create it, give it a name of your bubble application and it will give you that password that you're going to need to copy. That's all we're going to need to be able to communicate with WordPress. That's step one pro tip here. Store that password in your password manager somewhere because if you lose it, you have to delete it and create another one. Now the next thing we're going to need to do is we're going to go into the plugin section in your bubble builder and you're going to go to the API connector. I've created one here for WordPress. You're going to leave the authentication as none or self handled for the entire API content type is going to be application/JSON. And now we're going to have a few different API calls that we're going to configure. I'm going to start with the easiest ones and then we'll get to. The last one will be the new post, which is slightly more complicated. Get categories. You're going to create a get. You're going to use the username, colon, password, they are in brackets. Now you'll be able to personalize those from your bubble. When you call this API call, if it's always going to be the same WordPress site. Then Mark them as private and you want to. You won't even have to put them in there at the host name, wp, JSON, WP speed, two categories. And this will, once you done this, you can initialize the call and you'll see the response will be all the information from that WordPress blogs categories. Why? Because you're going to want to be able to put these somewhere in your bubble application so that you could reference. And we're going to see that, we're going to create a workflow that does just that. And in the database you're going to do the same thing with authors. And here the only thing is instead of categories it is users. You're going to put question mark who equals authors at the end and that will allow you to pull in the list of user IDs for authors of the blog because you may want to be able to pick from a dropdown the author to associate any specific blog post. So now we're going to be able to get the authors. I'm going to show you one more cool trick here, which is sometimes you will want to be able to take an image from the Internet from a URL of an image. So you copy the link, but you're going to want to store it in your bubble database. And so the easiest way to do that is to create an API call which just takes a URL. Okay. And it returns as data an image. And once you've done that, you can use that in any place in your application to take a URL and return an actual image that is pulled into bubble. That's important because that way you can pass that image on to WordPress seamlessly. Because if you just pass that original URL and then the source takes down that image, then you would break it on your WordPress block. So just a little trick there on how to actually grab images from URLs. Once we've done that, let's look at the final API call which is new post. And similarly it's got the username and password. This is going to be the application password that we copied from the user table that you know in, in WordPress. So that's where you're going to put that. And then down here you're going to pass this a JSON structure. In this case I'm passing title content status, which could be draft, it could be published, it could be scheduled. Author Featured media is the ID of the, of the featured image. We'll show you later how to actually create that on WordPress before you create the post and categories. In this case, I'm just passing one, but you could pass a list of categories if you want. And these are also going to be the IDs you can, if you go to the WordPress API documentation, you could pass the excerpt, you could pass custom fields. You can do a whole lot more just by adding in more data here and setting it in your bubble application. I'm going to leave that for you. If you want extra credit, go figure out a couple of extra fields that you want to include in there. Or if you want to schedule so that they publish in a future date, then you'll need to pass that date to WordPress so that they will be and the change from draft to scheduled. And those are the API connector calls that we're going to need. I'm also going to show you a plugin for uploading images directly to WordPress. You can upload media and delete media. It's called the WordPress Media File Uploader. If you open page, just show you here really quickly, it's $3. I mean, no big deal there sends up some work. You could actually program this in the API connector, but it gets kind of complicated and they've already done it. So give the guys three bucks and save these. So the next thing we're going to do is let's go to our database and I'm going to show you a table that we create here, which is we've called WordPress data and in this case we also have multiple blogs associated. I've created another table called blog, where I keep the app password stored in there. The domain is host, name of the blog, and then I've got a name and the username here. Okay. And in the data I have a type, which is an option set I've created, which is WordPress data type, which right now has author, category and post. So this is where I store those authors, I store those categories. And also when I publish, I store a record of that host here as well so that I can keep track of which ones I've created. We'll see in a minute in the workhouse how this all fits together. So you want to create this. It's got a name, an ID number, which is important, and a blog. And now we're just going to create the backend workflows so that we can actually make everything work together. So let's go into backend workflows and I've got a folder down here called WordPress and I'm going to show you a few different functions here. Do WordPress create categories? Okay. This workflow takes a list of IDs and will recursively create a row in that WordPress data table that I just showed you for each category. And so what it will do is it takes a list of IDs and a list of names and it will create. It also takes a blog, in this case, because I'm associating it to one specific blog. If you're only using one blog, then they don't probably don't need to quite as much infrastructure here. But if you have multiple ones from your bubble application, you want to be able to send to multiple different WordPress blogs, then you need to set it up this way. And then for every time it calls this, it will create a new row and it'll set the blog, the id, the name, which are the first ones in the list. They'll mark it as type category. It will make a change to that blog and add that category to its list of categories. And then it will recursively, if there are still more to do, it will schedule itself again, taking out the first item so that it will eventually, once it's processed them all, run out. So very typical recursive workflow here. This will allow you to create multiple entries for all of your categories. I've got another one here for creating authors. But how do we actually make this work with our. When we call the API to get the list of categories in the list of authors, first of all, if we're updating it, we need to delete all of the ones that already are in the table for that blog because we're going to refresh them and then we'll schedule another one that will actually load them back. So Update Blog has two things here. It deletes all of the categories and then it waits a couple of minutes to give that a little bit of time to finish. And then it will call Load Blog. This is where it gets interesting. Whenever you call this, it will for any specific blog, it is going to get the categories. It is using the API call we set up Get Categories. And it will also call get authors, okay? For that blog, passing in the username and the password. And then we are going to schedule on a list the create authors. We're going to pass it this list of IDs. So for this blog, we're going to pass it the result of step two, which are the authors, each item's ID converted to a number and each item's name as A text. In this case, I'm ignoring the privacy rules, but if you set them up correctly, it doesn't really matter. We're going to do that and then we're going to also do the same thing for the categories. Okay. And that way it will go off and pass these lists and we'll go through it recursively and create all of the rows in your data table. So you have all the authors and all the categories. So that's how you keep track of your categories and authors. And you can use that for any other Data that's in WordPress that you want to pull in and do do a similar backend workflow to do. Okay. We also have a custom event that I've created called Upload Media. And what this will do is it will just for this application's username and app password, it will take image and a blog. So I will take this image, it's of type file. So that's important that I have that. If I'm starting off with the URL, then we'll see in a little bit that we will actually convert it into a file for we, we pass it in. We will call Upload Media. This is from the plugin that I showed you, that $3 plugin. This will take it and upload that image into the media library. And then I will store in the blog table the ID that I got from uploading it. That's just a temporary storage. So that's when I've uploaded it. I keep it there so that I can know which one I've uploaded and I also return that media ID from this custom event, return data from the event. So now we're going to see the last backend workflow that we need to look at is new post. And when we do this, this is set up, it takes title, the content as text, image, author id, category id, status is a draft, whatever it is, the publish date. This is optional. Run the blog. First step is we're going to trigger that custom event that we just did and upload the image to the WordPress blog. And remember, that's going to give us back the id. In my case, I'm converting markdown to HTML because what I need to store in WordPress is the HTML. So if you're using a, a rich text editor bubble that gives you HTML, then you don't have to do this. In this case, we're getting back markdown from an AI tool that we've built in another platform. And so we pull in the markdown and I convert it to HTML. This is just another plugin that we're using for doing that. Then we call the API call that we built earlier new post passing it all of the parameters here. So we passed it. The result of the markdown to HTML, we're passing it here, the title. Also, be really careful when you're using formatted as JSON sake. And this is important because you're going to have quotes or punctuation marks or stuff in there that you can't just pass directly. You need to be careful that you don't include in your API call definition. Let me come in here to where I set this up because this will save you some some time. API connector we go to WordPress and you will see here that title is not in quotes. Content is not in quotes. Okay, here status is in quotes because I'm just passing a text to it and I'm not worried about it having anything weird in it so I don't have to do JSON save author. Here is this is a number, so there's no quotes there. Media ID is a number, so there's no quotes there. Category is also a number, so there's no quotes there. But if you leave the quotes here and then you use CAS as JSON safe, it will break. It won't work because it'll have double quotes. So just a little trick there. Nobody tells you these things, but they're important to know because otherwise you go crazy debugging and you'll spend four or five hours trying to figure out why every time you call it gets rejected. I do an API log of this post there and then I create in my table a new I'm using the ID that I get from this back from our API call here as type to post. I'm storing it. The name is with the title and associated that blog. And that way I have in my data table I can come here to look at what I get. So I can see authors, I can see categories and here I can see posts, I can see there's the titles. These are the IDs that you're getting back from WordPress. And yeah, that is basically the entire flow for how to set up an integration from within bubble to post directly to WordPress. I know there's a lot of moving parts to this, so if you do get stuck on this, feel free to reach out to us here@ratio.dev and we'd be glad to lend your hand. And I do want to really recommend though that you go to ratio.dev and you sign up for our no Code Resource Center. That's where we put all of the vetted plugins that we recommend. That's where we put over how to videos, all of our podcast episodes, our recommended books to read. Just a whole wealth of information that will help you on your bubble journey. It's absolutely free, so take advantage of that. Now that you've got the tool set to put this into practice, you can get really creative. You can set up automatic category assignment based on content tags in your Bubble app. You can create custom fields for SEO data. I've seen customers build really complex approval processes for their internal content management in bubble with their team members and then at the end it just publishes directly to their blog. It is important that you keep all of this in the backend because you don't want to be bogging down your user interface. That's why all of the workflows were set up as backend workflows, because that just keeps things nimble. And yeah, I think I've given you everything you need to do to be able to integrate your mobile application with WordPress and not get lost. Hope you've enjoyed the video. If you have, give it a like subscribe to our channel. That's great. We really appreciate that. If you get stuck, feel free to reach out to us. See you on the next video.