Steps to Develop a Best Responsive WordPress Theme with Bootstrap

Nowadays for creating a perfect responsive WordPress theme, Bootstrap is also an option. Bootstrap is a framework based on HTML, CSS, and JavaScript. For connectivity, it does not use Php, rather its styles and scripts both automatically interact well with each other and add necessary events where needed. As we know that there are several ways to make a responsive WordPress theme, but designing it through Bootstrap comes with many advantages as it is responsive and mobile-friendly, clear and sleek design, compatible with HTML5, easily accessible to scripts, etc. It speeds up the whole development process while eliminating the use of plug-ins. Here we will discuss the step-by-step method for designing a responsive WordPress theme with the help of Bootstrap.

Pre-requisite:

Before starting the designing phase you will need to have the following:

Step # 1 – Create themes folder

After installation, open the directory of WordPress files and go to, Wp-content >> themes. Leave it empty for now and rename it accordingly.

Step # 2 – Create some additional files

After extracting the downloaded Bootstrap folder, 3 folders would be appeared named as CSS stylesheets, js- JavaScript and fonts. Extract all of the mentioned folders in Themes folder. After this create some additional files named as (style.css, index.php, functions.php, header.php, footer.php, sidebar.php and footer.php) in the themes folder. Leave the entire files empty for now.

Step # 3 – Create Html page

Copy the source code of any HTML page (static) of your choice and paste it into index.php file.

Step # 4 – Do editing in style.css file

In order to style the responsive WordPress theme, starts editing the CSS style sheet file ‘style.css’. Start with adding comments on the top of the file which is followed by adding the name of the theme, its URL, description, coder details and associated tags which help WordPress to identify the respective theme and display it accordingly.

Step # 5 – Add image in WordPress admin area

As per WordPress requirement, add an image (of your choice) of size (300px x 225px) into WordPress admin area. Rename it screenshot.png, no other name besides this.

Step # 6 –Activate the WordPress theme

Go to admin area >> Appearance >> Themes. There you will see the theme file (for example: wpbootstrap). Activate it.

Step # 7 – Do editing in header.php file:

Copy the below-mentioned code in the header.php file as it is.

Step # 8 – Do editing again in the footer.php file:

Paste the above-mentioned head content (HTML coding) only in this file.

Step # 9 – Add JavaScript code snippets in header.php and footer.php file:

Add the following code in header.php and footer.php both files for accessing JavaScript functionality.

Step # 10 – Do editing in respective files:

In ‘index.php’ file you will use 2 built-in WordPress functions get_header( ) and get_footer( ) for accessing header and footer in main page. Rest of the editing is given as follows for making a responsive WordPress theme website.

  • Add the following code in ‘style.css’ file.
  • For making a wp_head function in index.php file, copy the following code as given:
  • The ‘footer.php’ file code should like as follows:
  • For accessing JavaScript functionality, add the following functions in ‘header.php’ file”

Step # 11 – Aligning the WordPress homepage structure:

  • For seeing final appearance of responsive WordPress designed theme, firstly access the ‘admin area’.
  • Then click ‘Pages’ on the sidebar and add new into it. Make the title of the page ‘Home’.
  • After it clicks on the HTML tab and cut the remaining portion of code from index.php file.
  • Paste rest of the code on the home page and publish it.

From here (admin area), you can add more pages of your choice like blogs, news, etc.

 

Step # 12 – Adding widgets for sidebar:

In the last, add sidebar in your homepage structure. It is really essential because it allows WordPress to add different widgets to your website. Paste the following code in the ‘function.php’ file.

 

Congratulations!!!  If you have completed all the above steps accordingly, so now you can see live your best responsive WordPress theme website made with the help of Bootstrap and without minimum coding knowledge. That’s one of the most important benefits of using WordPress.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s