Apply Bootstrap Classes to WordPress Theme

In this article, We are creating a structure and apply bootstrap classes to WordPress Theme. The Previous tutorial is a basic design of WordPress theme. Now in this tutorial, we are going to create Layout for  WordPress Theme. In addition, we will add style to this theme. You can change this layout and style as per your requirement.

Apply Bootstrap Classes to WordPress Theme

In the above image, you will see we added another post to WordPress Article One Name and put some demo text. We are adding two columns one is for posts and second is for the sidebar. Now you will see the difference between the first article theme and this one.

This theme seems like a website now but we want to add some more functionality to it.

So First we will two columns in the index.php file and put post-loop code into the first column. The following code will show you how to achieve this.

In this code, we put division with container class and create a row. In that row, we will add two columns. The first column demonstrates posts and the second columns will show up the sidebar.

Now we will insert this code into index.php file. Cut and paste post loops in the first columns and

So index.php looks like this.

Post Information

 So, we will put some post details just after post title. Now we will add some code just after the title to show date and post author. There is most of the time you need to show the author and post date because if you have multiple authors then this really helps you to understand which post is posted by which author.

Now put this code just after the post title.

This code will add date and author. we had created p tag and insert time function. This time function will take date format to display dates. You can find out this format when you google PHP date format.

finally, we had added some author in the anchor tag. In the href attribute, we had added PHP code get_author_posts_url. This code will get the author URL from the post. furthermore, we specify get_the_author_meta parameter and specify ID. This parameter will get the author ID and pass this to get_author_posts_url.

after you place this code it will look like this in the index.php file.

Finally, We had created index.php file and apply bootstrap classes to WordPress theme but there are lot more things to do. We will cover this in the next article. So in the next article, we will create sidebar widgets.

 In the next article, we will add widgets in the sidebar. This article covers everything from sidebar creation so don’t miss this out.

We will see you in the next article.

If you have any question then comment me in the comment section. Follow us on Facebook and Instagram. For more information, you can check out our Youtube channel also.

Thank you.