In this guide, we’ll show you how to add a fully functioning custom blog to your WordPress website with a few lines of code.
WordPress powers many websites across the internet and comes with a wide variety of tools, most notably its own blogging features. But what if you'd like to add an additional blog to your WordPress site? Or maybe you'd like to allow other contributors to add posts to your blog? Using a tool such as DropInBlog allows you to easily add a second blog to your website and means you can safely give content creators access to submit blog posts while other team members can continue working on the main website.
You’ll need to create a DropInBlog account, which you can do for free with a 14-day trial, and you'll need an existing WordPress install. You’ll also need to be logged in to your WordPress site as a super-admin, which is the primary admin of the WordPress installation, to give you the right permission levels to add the custom code.
Creating a Blog Page
To create a new page, log in to your WordPress website admin and use the Pages item in the sidebar. You can either hover over the sidebar item and click Add New or click Add New on the Page listings view itself. Then, name your newly created page. I’m going with the creatively imaginative name of “Blog”.
Adding Your Embed Code
Depending on the version of WordPress you have, the process of adding the DropInBlog embed code may differ a bit.
For newer WordPress versions 5.0 and above you’ll be presented with the blocks editor. Within the blocks UI, use the plus icon to add a Custom HTML block to the new page, once added you’ll then be able to add the DropInBlog embed code.
For older versions of WordPress, you’ll be presented with (or will have access to) the classic WYSIWYG editor. Switch to Text mode so you can add the DropInBlog embed code.
To find the embed code, open a new tab, navigate to DropInBlog and log into your account. After logging in, click Code & Layout in the main navigation. Copy the code shown in Step 1. It will look something like this:
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
Switch back to WordPress and paste this code into the HTML editor.
Then go back to DropInBlog again and copy the code from Step 2:
Finally, switch back to WordPress and paste this additional line of code above the code from Step 1. WordPress comes with an autosave feature that will save the changes you’ve applied to your new page, however for older versions you may need to save these changes manually.
Publishing Your New Blog
Now that your DropInBlog blog has been added to your website you need to modify your blog settings to account for its new home before publishing it live to your store.
Within your DropInBlog account navigate to Settings and update the Blog URL field with the URL of your new WordPress blog page. If you’re not sure what the full URL is, you can open your WordPress website in a new tab, navigate to your blog page, and check the address bar of your web browser. Click Save All Changes once you’ve added your new blog URL.
Finally, switch back to WordPress and click Publish and/or Update in the top right corner of the Page editing view to publish your new blog. Check out your new blog page by clicking the Preview button in the top left corner of your browser.
Mission complete! ✨
For some people, WordPress may remove the script tags that are part of the DropInBlog embed code.
There are a couple of ways to circumvent this. You can contact your website administrator so they can modify the configuration of the website so you can add this code, you can log in as the super-admin if you have the credentials, or you can use the WP Coder plugin. This WordPress plugin gives you a little more power to edit the HTML of your pages, allowing you to add the custom embed code for DropInBlog.
If you still need some assistance with getting set up please do get in touch and we’ll be more than happy to help out.
Happy blogging! 🤓