Design a Responsive Website using WordPress & Open New Gate’s of Success

Why you need a responsive website?

Responsive websites are nowadays marked as the main step of the successful online presence. Because your user needs an adjustable and easy to navigate the responsive site to use. So, to get the response out of the audience, you need to build a responsive website.

Well, when the head of Google’s webspam team, Matt Cutts, explains the benefits of responsive websites, then you must be dense to ignore them. Okay, so if you are ready to design your responsive website, then you have only one option, that is a WordPress.

Because when we discuss the long list of WordPress advantages, then on top comes the customize plugin feature of WordPress. With the popular CMS and strong open sources community of developers and designs, WordPress is an ideal platform to create a website theme from the scratch. Already numerous developers have designed different stunning WordPress themes, like Redux Framework, Carrington Core, Bootstrap etc.

What is a Bootstrap?

Well, there are plenty of options available to design a website theme from the scratch, but today we will focus on bootstrap. Because it is backed by strong open source community of developers and it is very lightweight as it is coded in LessCSS. Moreover, within eight simple step, you can design a responsive website with it.

Step 1: Install Bootstrap

The fine most step is to download WordPress to your domain name. Then, visit http://getbootstrap.com/ and download bootstrap from it. Now, connect to your hosting server using FTP files. And, then open wp-content theme folder and create a new folder in themes directory called BootSTheme and upload the contents of unzipped Bootstrap in this folder.

In the end, WordPress setup consists of the index.php, style.css, header.php and footer.php files will be created.

Step 2: Configure Bootstrap

From the above mentioned four files, open style.css and write your code in it. The code is the simple description and detail of the theme which will be designed as per your wish.

Step 3: Coding Part

In this step, you have to do all the coding stuff. For this, you can use all of the CSS and JS files provided in the bootstrap package or can copy the bootstrap.min.css. This totally depends on your coding knowledge and skills.

Step 4: HTML Templates

Now, you required basic HTML to work with. Mainly, the  get_header() and get_footer() functions are built in the WordPress in header.php and footer.php file. So, you just simply need to copy HTML templates in the functions. After this, you need an index. php file to make your site visible.

Step 5: Setup Header & Footer

In header.php file, you have to import the Bootstrap stylesheet by using the WordPress function echo get_stylesheet_uri(). But, still, Java won’t be working on your site, so for that import your js files by directly importing the file by URL in the footer.php.

Step 6: Display Featured Post

Now, using index.php you need to display featured post on your website. Similarly, like we see a featured post on every WordPress sites.

Step 7: Listing Categories

Now, you are ready to list all your categories on the homepage, that can be done using div styled with the classes of bootstrap and by WordPress function wp_list_categories();.

Step 8: Post Your Blog

Finally, you can post a blog on the homepage. For that create a new div tag and use WordPress function the_author(); to write a post.

So, people just like that your very basic personalized WordPress theme is ready to kick start.

Send a Message