• Create Wordpress Theme From Scratch Step By Step
• Create Wordpress Theme From Html
• Wordpress Templates Free Download
• Create Wordpress Themes Software

How to Create WordPress Theme is amongst the top queries in google search. Creating a WordPress theme can be simple if you know basic HTML, CSS and JavaScript. However, if you are new to WordPress then this tutorial is for you. All you have to do is follow the steps mentioned. So, let’s read this guide and learn how to create WordPress theme from scratch.

Requirements

Creating a Custom WordPress Theme for Beginners Unlike static HTML sites, WordPress themes are a set of template files written in PHP, HTML, CSS, and JavaScript. Typically, you would need to have a decent understanding of all these web design languages or hire a web developer to create a custom WordPress theme.

First and most important thing you need to do is, install WordPress. WordPress is well-known for its ease of installation. It’s a simple process and can be done easily by yourself by following the guide.

How to Create WordPress Theme; Step by Step Guide

• WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look. You may wish to develop WordPress Themes for your own use, for a client project or to submit to the WordPress Theme Directory.
• Create is a powerful and flexible theme. It is built around the awesome open source Page Builder from SiteOrigin. With it, you have maximum control over page layout and content creation. It also comes bundled with the #1 slider plugin, Slider Revolution, a $25 value!

For WordPress theme, everything will be done in the wp_content directory only. Just make a new theme subfolder in the wp_content → Themes folder. Let’s assume you name it “CustomTheme”.

The second thing is to decide the layout of the theme. Here, the tutorial is showing the basic layout consisting of Header, Main Area, Footer, Sidebar.

Basically, WordPress needs only 2 files i.e. style.css and index.php. But, for this layout, you need 5 files, as follows;

• header.php – contains the code for the header section of the theme.
• index.php – contains the code for the Main Area and will specify where the other files will be included. This is the main file of the theme.
• sidebar.php – contains the information about the sidebar.
• footer.php – handles the footer section.
• style.css – responsible for the styling of your theme.
• bootstrap.css – no separate CSS code is required; highly responsive.
• bootstrap.js – provides its own js for the navigation bar, or tabs, etc.

bootstrap.js and bootstrap.css needs to be downloaded from bootstrap package and copied into the theme folder.

Here are the steps to follow to setup theme

Step 1: header.php File

Put the following code in header.php file.

This file Header.php contains the code for the header part in which the js and style file is linked. It displays the header of the page.

Step 2: index.php File

Put the following code in the main file index.php

The above code displays the main content of the Post, Sidebar and Footer.

Step 3: sidebar.php File

Add the following code in sidebar.php

In the above code, internal WordPress functions are called to display different Categories, Archives of Posts.

Step 4: footer.php File

Add the below code lines to the footer.php file:

Step 5: styles.css File

Add the following lines to the style.css file

After following all the steps above, you’ll have a basic working WordPress theme. You can further modify it to make it more beautiful and fit for your requirements.

Conclusion

In this tutorial we have explained how to create wordpress theme in simple and easy steps. After reading and following the steps creating a WordPress theme is no more difficult task now. But, obviously this tutorial stick to very basic setup and to enhance on top of it you’ll have to learn more about HTML, CSS, JS and PHP.

We all like to experiment with different types of content from time to time. Storytelling is one of them. It’s fun for us, the creators, and for our readers because storytelling is one of the most engaging content formats^[1], especially if it’s visual. The good news is that Google Web Stories for WordPress gives you the chance to be a storyteller, too.

In this post, we’ll show you a step-by-step guide on how to integrate Google Web Stories with WordPress in order to create beautiful and catchy stories for your blog.

Let’s dive in!

What are web stories?

As a content creation option, “stories” caught popularity on social media channels like Facebook, Instagram, or Snapchat. They are visual posts, often seen as slideshows, that tell a short story or present something. A web story consists of images combined with animations, text, and various effects.

If you’re active on at least one popular social media network, you certainly are familiar with the Stories concept. You might have even created your own stories throughout the years.

With Google Web Stories for WordPress, you can create visual stories via your WordPress dashboard that you can embed in your blog posts. It’s a great addition for storytellers who love to communicate through more than just words.

How to create Google Web Stories for WordPress

Now that you know what Google Web Stories are, we’ll show you the complete tutorial on how to create and publish stories on your WordPress website.

1. Install Google Web Stories plugin

The first thing you need to do is to install the Web Stories plugin via your WordPress dashboard. The plugin is free.

Once you activate the plugin, you’ll see a new entry in your WordPress dashboard menu, called Stories.

Before creating your first story, go to Stories → Settings and configure the options that you need based on the goals you want to achieve with the web stories. You can set the Google Analytics tracking, custom logos, video optimization, and monetization.

2. Create your first story

To create a new story, go to Stories → Add New and, in front of you, you’ll see a black editor.

The editor has a simple interface that is easy to grasp:

• To the left, you have all the elements that you can feature in a story (mostly media elements and layouts).
• In the middle, you have the canvas where you need to drag and edit your elements.
• To the right, you’ll see a sidebar with the customization options for each element you add to the canvas and the document’s settings before publication.

In the Google Web Stories editor, you can upload your own media files, but you also have access to a large library of free images, videos, and GIFs that come with the plugin.

Another cool thing about Google Web Stories for WordPress is the pre-made layouts that you can use to quickly create interactive stories.

3. Add a background

To add a background to your story, you need to click on the white canvas and pick your favorite color from the right sidebar.

If you want your background to be completely filled by an image, you can either upload your own image or choose from the plugin’s photo library. You can do both via the left sidebar.

To make the image fill the entire canvas, click on Fill as in the screenshot below.

4. Add text

Create Wordpress Theme From Scratch Step By Step

To add text to your story, you can click the T symbol in the left sidebar and pick a preset font and style. Once you click on it, the text element will show up over your background. The text preset styles are diverse and very useful if you’re out of creative ideas.

To adjust the text, drag the corners of the text box (to make it smaller or bigger). To customize the color, font, opacity, position, and animation, click on the text and select your favorite styles from the right sidebar.

5. Add shapes and layouts

In addition to images and text, Google Web Stories for WordPress lets you make your stories even more engaging by offering a nice library of shapes and animated layouts that you can use if you don’t have the time to create a story from scratch.

You can browse through the beautiful pre-made templates, add them to your story pages, and customize the text and colors.

If your content requires it, you can also insert shapes that you can animate and customize.

6. Add multiple pages to your web story

Once you’re familiar with the editor’s elements and interface, it’s time to create multiple pages for your story. The plugin’s checklist prior to publication (which you can find in the right sidebar, at the top) actually recommends that your story has between four and 30 slides.

Right below the canvas, you have a few options to delete or duplicate the page you’re currently seeing, add a new page, redo/undo actions, and play the story.

You can add as many pages as you want by clicking on New Page and designing it just like you did with the first one. If you want to use the same layout on all pages, you can just duplicate the page and change the text/colors afterward.

If you don’t like the outcome of a page or you just changed your mind about its design, you can delete it and add another one in its place. To change the order of the pages in a story, drag and drop them as seen in this picture:

7. Publish the web story

When your story’s design is ready, there are still a few things to take care of before publishing.

Click on Document in the right sidebar and make sure to fill out all the suggested settings before publishing. El capitan latest version. It’s basically the same procedure you follow before publishing a WordPress blog post.

You can schedule the publication date for the story, upload the cover image and your logo (this could be your profile picture if you’re not posting the story on behalf of a company), write the story description, set its slug, make the story slideshow automatic or manual, and type the duration between slides.

The last step before publication is to consult the checklist that offers advice on the story overall and on each page alone. Some are high-priority indications, while others are just recommendations (they are up to you).

When every detail is ready, you can preview the story on different types of screens and publish it.

Where to use your Google Web Stories on WordPress?

You can insert a story anywhere on your website, be it a post or a page. Go to the post or page where you want to insert the story, add a new block, and select Web Stories.

Here, you have a few options: either display all the latest stories, make a selection of a few stories only, or enter the URL of a single story that you want to embed.

To get the URL of the story that you want to embed, go to Stories → My Stories on your WordPress dashboard. Next, click on the three dots next to the story’s name and then on Copy Story URL.

Go back to the post and copy-paste the story URL to the Web Stories block, then embed.

If you want to showcase multiple stories, you have the option to choose from a few layouts:

• Box carousel
• Circle carousel
• Grid
• List

You can also use the web stories as widgets in your site’s footer or sidebar. Go to Appearance → Widgets on your WordPress dashboard and click on Web Stories → Add Widget.

In your theme’s widget area, you can select the order of the widgets with drag and drop and also customize the Web Stories widget by setting the layout, the number of stories, their order, and other options.

Create Wordpress Theme From Html

This is how a widget featuring web stories will look in the footer.

Wordpress Templates Free Download

Conclusion on Google Web Stories for WordPress

If you’re a fan of storytelling, you will probably love to create web stories for your blog.

Create Wordpress Themes Software

On the other hand, if you’re wondering why you should publish web stories on your site, we’ll give you a few reasons for that:

1. They make your content engaging (you can combine images, animations, videos, shapes, fancy typography, and catchy layouts).
2. You get to diversify your blog content.
3. They are a good substitute for a post (when you don’t know what to write).
4. You can monetize them via affiliate links.
5. You can turn multiple stories into a beautiful storytelling article.
6. They will be recognized by Google and will appear in the search results.
7. Through the Google Analytics feature, you can learn more about the viewers of your stories.
8. They look great on mobile (and load faster due to the AMP integration).

What do you think about sharing web stories on your website? Have you tried Google Web Stories for WordPress yet? Let us know in the comments section below.