On 21, April 2015, Google made a massive change to the way they rank websites. I guess you probably know I’m talking about responsive and mobile-friendly design, right?
On Google’s blog you could read: “More and more people use mobile devices to access the Internet and we want to ensure a site is configured properly and viewable on modern devices. If your site is not fully optimized for mobile devices, you will likely see a hit to your ranking on mobile searches”.
When it comes to search on mobile devices, users should get the most relevant and timely results, no matter if the information lives on mobile-friendly web pages or apps.
So understandably, it has become so much more important and necessary your website has responsive design than before.
Is your website mobile friendly? Find out here – Mobile-Friendly Test tool.
How To Create a Responsive WordPress Theme From Scratch
If we’re talking WordPress themes, both free and premium, most of the themes are responsive today and has a mobile-friendly layout that makes the theme / website looks perfect no matter what devices you using or browsing.
So there is no reason for concern. But if you would like to immerse yourself and create a WordPress theme of your own, there is a perfect solution. In today’s article, I want to recommend a few tutorials out of the ordinary. How about to learn how to create a responsive WordPress theme from scratch?
A lot of you guys probably knows about the website Blog Oh! Blog, right? For those of you who don’t know, Blog Oh! Blog is a website that been around since 2007 and is run by Jai Nischal Verma. Jai is a web developer specializing in WordPress and has 10 years of experience in developing websites and blogs. He has also created a lot of awesome themes such as Nepal, Keep Writing you should take a closer look at.
But as our headline suggests, this is an article including tutorials, so let’s go straight to the bottom line, how you can proceed and learn how to code a responsive WordPress theme using Bootstrap framework. Jai has published 3 great video tutorials. You can also download the relevant files, edit and learn yourself. After the completion of the series, the final theme will also be available for download.
Let’s get started:
Create a Responsive WordPress Theme – Video Tutorial 1
This is the part 1 of a series of tutorial videos for all of you who want to learn how to code a responsive WordPress theme from scratch. In the videos, Jai will be using code snippets and explaining what each one does, and gradually completing the theme as the series progresses. So rock on with the first video part and start hacking code. Download the Tutorial Files.
Create a Responsive WordPress Theme – Video Tutorial 2
In part 2 Jai explains how to code each webpage element using Bootstrap Framework and integrate it into WordPress. Jai will also be teaching you how to put background images in the full-width slider and transition them through a fade effect. How to make a dynamic features section including icons using the Font Awesome icon library. Finally, how to make a call-to-action section that can be used to lead the user to another page or make him perform an action. Download the Tutorial Files.
Create a Responsive WordPress Theme – Video Tutorial 3
In part 3 of how to create a responsive WordPress theme using the Bootstrap Framework Jai will demonstrate how to create a full-width parallax image section, a recent blog posts section, and a footer. All the code is responsive and works properly with smaller devices. Download the Tutorial Files.
We are waiting for the last part in the video serie – How to create a responsive WordPress theme. And as soon as it is released we’ll add it to the article.
In the final video, Jai will teach you how to build the inner page templates and the blog. While we are waiting, you have a few hours of educational videos to go through in the best possible way to learn – How to create a responsive WordPress theme using the Bootstrap Framework.
Have you had the opportunity to watch and follow the video series? We would love to hear your thoughts in the comments below!