WebStories on your WordPress website

Introduction

Hello, and welcome to this lesson on how to use MakeStories and WordPress together. All of you know that WordPress is the number one CMS in the world today, and we are excited to let you know that MakeStories has been supporting the integration with WordPress from day one.

Initially, we had our WordPress plugin where you used to publish your stories from the MakeStories dashboard to your WordPress website.

There was no way where you could edit these stories straight onto your WordPress website. To solve this issue, the engineers that make stories have worked really hard to make sure that you can use the MakeStories editor from your WordPress dashboard.

Now, since you know that MakeStories is standalone software, you will have to authenticate your WordPress website on the MakeStories dashboard.

We will show you a step-by-step process on how to do that.

So let's start. First of all, as you all know that when you use any plugin on WordPress, you will have to first install that.

We will go into my plugins page and click on add new. We will search for MakeStories.

Here you can see that we have the official MakeStories Plugin. We will click on install. Now, this plugin is installed and we will activate it.

When you activate, you will find two options. Number one is settings, and the second one is deactivate. We will look into this later, but first, we will see how to authenticate your WordPress website on the MakeStories dashboard.

How to authenticate WordPress site on MakeStories

click on MakeStories. The moment you do that, you will see that this page is loading. For the first time, it will take some time to load.

It can take up to 40 seconds to one minute for the MakeStories editor to load because it tries to transfer all the files into your system and make sure that you have a seamless experience while editing your story.

So now the page is loaded. The first time you are using a MakeStories plugin, you won't see the interface directly, even if you're logged into your MakeStories account.

What this will do is the moment you see you log in to this page, it will show you a message that no MakeStories connected account found, click the below button to connect your account please.

Now here you can see that you have a connect to MakeStories this system by default, we'll pull in the email address that you have for this WordPress user.

Then we will click on connect to MakeStories, the moment you do this. It will say, sending connection request and once it has sent the connection request, it will pop up a new message saying your connection request has been sent.

Please log in to your WordPress dashboard and accept the connection request. So we will click on login into WordPress dashboard and It will take us to this beta.makestories.io/wordpress/sites.

Over here, we can see our new website, which is authorized by many clients.

There You can see that we have a press domain: msplugin.3sdemo.com.

We will click on allow, once you have allowed this website to be used on your WordPress website, you have to go back and now you have to click on, I have verified my account.

Once you do this, MakeStories'll make sure that this website is now authorized to be used for your MakeStories account.

So now you can see, the entire dashboard, which we were seeing in the MakeStories account has been replicated inside the WordPress website.

The left menus are a bit different, and, so here, the only change that you have is the stories published. When you click the stories published, it will take you to a WordPress page with a list of all the web stories that you have already published on your WordPress website.

Understanding MakeStories Settings

What we will do now is we will try to understand the settings that MakeStories comes with. So we will click on the settings button. Here it says, Slug.

A)What is this Slug?

Let's try to understand this. Now, if you see pages, let's say we have blogs. Then click on view, and you will move to this msplugin.3sdemo.com/2021/04/27/hello-world/. This is the slug of your post.

But let's say you have a custom post type, or let's say you have a WooCommerce installed on your WordPress website. In such cases, you can see that your products stay on URLs like my website.com/product/productsslug.

Similarly, custom post types need to have a slug. All of the stories that you publish using the MakeStories editor will have a certain slug. In our case, our website is msplugin.3sdemo.com, so our web stories will be on msplugin.3sdemo.com/web/stories/ whatever the story name is.

For some reason, if you do not want to have web dev stories, you can enter anything. Let's say you want to write food stories. For example, if you're into food blogging, you can write a food story. This can be anything.

Now, there has been a known conflict with Google's official WordPress plugin, because they have been using the same slug as web dev stories.

If you have installed both the plugins, that is the Google’s Plugin and the MakeStories plugin, make sure that the slug for both post types is different.

So for now we will just keep stories over here in the slug tab. The second option is to allow categories. So Categories, if you want to have the category functionality for your stories, you can click add categories.

Since we do not have any category, as of now, the only default category option that we get is uncategorized. You can decide who all can use the MakeStories plugin. If you really don't want the editor and author to use the MakeStories plugin, you can just turn it off.

So this is pretty simple. We will now click on save changes, and now we will refresh this page. Here you can see that now we have categories over here in the left panel of the WordPress site.

So we will go into categories and write our first category food and then we will write another category called travel. Now we will go back to the MakeStories tab.

Over here, You can see that we have the one story, which we have been doing for a long time. We'll try to publish this story. Everything else remains the same inside the editor, except two things.

B) What Changes do you see in WordPress MakeStories Editor after publishing your Web story?

Number one is the Media library thing that we have. You also know that MakeStories has its own media library, as well as WordPress, has its own media library.

Like all the images that you have used in your WordPress website. If we want to use them on the MakeStories dashboard or while creating the story, you can click on the media library.

By default, whenever you click the media library, it will open up the WordPress media library. When you click on the MakeStories icon at the bottom, it opens up the MakeStories media library. All the assets that you have uploaded to your MakeStories account will be reflected here.

But by default, to make the process easy for WordPress users and to make it feel native for the WordPress users, we have made sure that whenever you click on the media library, the native WordPress media library is triggered, so that's one difference.

Another difference which you will see is at the end, the publishing interface is very different from the MakeStories interface. Here you can see that it directly picks up the website name and the stories slug.

If you remember we changed a web/stories to just stories so that it reflects over here, and it says, msplugin.3sdemo.com/stories/. And this is the slug below the URL.

Now, since we have selected categories, you can select categories over here. Let's say, if you don't like any of this category, what you can do is you can click on create new. When you do that, there will be a new category.

Enter the name of the category you want to add and simply click on add. It will be added to the categories. Now, all you have to do is to hit publish new. We will do this. The number one will be collecting your assets. The second one will be publishing to WordPress.

C) One-click Publishing in MakeStories

Now the third it's saying uploading media to WordPress. What is this? So let's say you have published, or you have created a story on MakeStories Editor.

Now you are connecting your MakeStories account to the WordPress website.

But the assets are still on the MakeStories server. So we will If you want to make sure that when you host a web story on your domain, all the assets are sold from your domain and not from the MakeStories domain.

What we do is migrate all the assets from the MakeStories server to your own server, to make sure that your data always remains with you.

Now I will click on the visit link. You can see that we have the story published on your own WordPress website. Now you can, if you see the image. Let's inspect elements, You can see that the images are uploaded to your WordPress website.

If we also see this page, you can see the images uploaded to your WordPress website.

You never need to worry that you will be having a dependency on MakeStories, and we can simply remove your images, or you can stop them. All the data always remains with you. This is the simple one-click publishing that you get with MakeStories.

Understanding Categories

Now let's take a look at categories. We will leave this page. Now you can see that for the quiz, we have one count. Now we will click on the view. This quiz page has one story, which is published.

You can see that the poster image is also pulled and you have it over here.

It's pretty simple. You can override the design, using your own HTML and CSS, just the way you want. If you go to the /stories page, we have the page automatically created for you.

You really don't need to create a different page or something like that. All the stories that you will publish will be automatically listed on your stories page.

Now your stories page will be similar to the stories slug

For now, our story slug is only stories that say, I want to change it to web stories. Now, if you see this, it shows me 404 because now all of our stories are on web stories URL.

since we change the Slug for the MakeStories post time.

Now, when you click on publish story, you will see a quick quiz about New York City. This was the story that we published. So it's pretty simple. We can use native WordPress features like this.

You can do a quick edit whenever you click on edit, It will open the story in the MakeStories editor automatically.

You do not have to do anything. If you view the story, it will open up the story on your WordPress website. You can now see that it has web stories in the slug because we just changed it on the settings page. This way we saw how you can add categories.

Now, if you want to have the category name in your URL, you will have to change the permalink. You can connect with your developer, or you can find more documentation about how you can have the category name in your permalink. It's pretty simple.

Please check in with your WordPress developer and they will be able to guide you.

How you can use MakeStories with Gutenberg

Now, coming back to other things about the MakeStories features. MakeStories Plugin is the only plugin that is compatible with both Gutenberg, as well as classic editor.

If you love Gutenberg or you hate it, you don't have to worry about it. Let's take a look at how you can use MakeStories with Gutenberg.

What We will do is we will create a new page. We have the Gutenberg blocks for you. We will add the title. Let’s say New York quiz and add some dummy data from lipsum.

Now, you can click on the plus and what we do while the people are viewing our page. We will embed my entire story inside the page.

We will click on Ms Single post and will select the story. Now we will save this and preview this. Let's preview this in a new tab. Now you can see that while we have the WordPress blog, we are reading it, and now we have the entire story embedded into our post.

You can engage your users in such a way, and by creating these kinds of stories and embedding them right away inside your post.

All about MakeStories published post

The second blog that we have Is the MakeStories published post. What this will do is, suppose you have 20 web stories that you have published.

It will, what it will do is it will add the stories over here like this. Since we have only one story, we'll see only one story over here. For the sake of testing, add a few more stories.

Now we have published about four different stories. Now if you refresh, you can see that we really do not have to, you know like again, put each and every story they are automatically listed on this page.

When anyone clicks on this, the story will open up on a new page. Very soon we are going to provide you an option to have a small circle kind of carousels on your WordPress website. You can just copy-paste the code anywhere you want.

These stories will open up and in a lightbox and you will have an Instagram kind of user experience. This is what this particular blog does as it just places the, like all those stories that you have published on your WordPress website.

Let’s talk about categories and stuff in detail

Now, let's say we have this story about entertainment, and you want to kind of write some content about entertainment and then show all the stories that we have in the entertainment category.

How will you do that? You will click on, add a new block, and then you will select Ms. Category post. Over here, you will select the category, which you have published the stories. Now, this is showing the zero stories, because we have, like kind of not refreshed this page.

Now, if you click refresh over here, you can see that we had one story in the travel category, and it is displayed over here.

This is how you can use the kind of Google Gutenberg block structure and use make stories blocks. This is what you can do with Gutenberg.

Now we know that not everyone is a fan of Gutenberg. In such a case, if you are using the classic editor plugin, we have a solution for you too.

Let's take a look at how you can do that. Click on, add a new page. We have that back to the classical editor. We will click on entertainment and this will be our link. Here you have an option called shortcode generator. If you select to show all stories, you really do not need to do anything.

All you have to do is save and publish a draft. Now you can preview this. You will have the same look, whether you are using Gutenberg or you are using a classic editor.

Click on the shortcode generator. Again show Stories in one category, select the category, click on okay, and then save a draft and click refresh.

Now you can see that we have the stories from the travel category. So this is the page on entertainment, let's do this.

Let's select the entertainment category, save the draft and click refresh. You can see that the story from the entertainment category is coming again.

You can change the look and feel of this page as you wish.

We have complete like we really do not have, complex HTML CSS structures. These are like very simple HTML structures, you can just go in and you can change them the way you want.

The final thing is like the embed stuff. We want to show the story and click on save a draft and click refresh. Now you can see that the entire story is embedded into the post. This is all that you can do with the MakeStories plugin for your WordPress website.

Thank you, guys.