Before starting the designing phase you will need to have the following:
- WordPress [Install it from here – https://wordpress.org/]
- Bootstrap [Install it from here – http://getbootstrap.com/]
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
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 # 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:
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.