Bootstrap And WordPress Theme Integration In 6 Easy Steps

1
Bootstrap And WordPress Theme Integration In 6
Easy Steps
2

• Email ussales_at_hirewpgeeks.com
• Call us 1.949.591.8153

6 EASY STEPS FOR BOOTSTRAP AND WORDPRESS THEME
INTEGRATION
One can easily convert a website to WordPress
theme by integrating WordPress and Bootstrap so
that the design, as well as the content of their
former website, remains intact. Before starting
this tutorial, lets lay an eye on the
pre-requisites for the same ? basic
knowledge of WordPress working, creating
themes, etc ? basic understanding of the
HTML language
3

• Email ussales_at_hirewpgeeks.com
• Call us 1.949.591.8153

1. CREATION OF THE BOOTSTHEME FOLDER

• Install WordPress and download Bootstrap. After
  selecting the Theme folder within wp-content,
  create a new folder named BootSTheme. Unzip the
  contents of Bootstrap into this new folder.
• Now within the same folder, create four new files
  (all empty) and name them as
• ? footer.php
• ? header.php
• ? index.php

4

• Email us sales_at_hirewpgeeks.com
• Call us 1.949.591.8153

2. PROVIDING DETAILS FOR THE THEME

• To provide the basic details about your theme,
  copy the following code into the style.css file
  (enter the details according to your theme)
• /
• Theme Name
• Theme URI
• Description

5

• Email us sales_at_hirewpgeeks.com
• Call us 1.949.591.8153

4. SETTING UP THE HEADER AND FOOTER

• If you dont know how to convert a website to
  WordPress theme, first of all, download a free,
  basic HTML template to ease the documentation
  part.
• Now, copy the header part and paste it in the
  header.php file, and the footer part in the
  footer.php file. (Dont forget to make changes
  according to your website!)
• If you upload this bootstrap WordPress integrated
  theme and run it, you will see the essential
  contents on the page, and nothing else, not even
  the styling.

6

• Email us sales_at_hirewpgeeks.com
• Call us 1.949.591.8153

5. IMPORTING STYLESHEETS, JAVASCRIPT AND
CUSTOMISATION

• Add the following code in the beginning of the
  header.php file to merge style.css with the
  website
• To add the JavaScript features, open the
  footer.php file and enter the following code just
  before the closing body tag
• Customisation

7

• Email us sales_at_hirewpgeeks.com
• Call us 1.949.591.8153

6. DYNAMIC POST CALLING

• To have a website with features like dynamic post
  calling, paste the following code in index.php
  file
• lt?php
• query_posts(posts_per_page1)
• while(have_posts()) the_post() ?gt
• ltdivgt
• lth2gtlta hreflt?php the_permalink() ?gtgtlt?php
  the_title() ?gtlt/agtlt/h2gt
• ltpgtlt?php the_excerpt() ?gtlt/pgt
• lt/divgt
• lt?php endwhile wp_reset_query() ?gt

8
Contact Us
We are always happy to make valuable new
contacts.
https//www.hirewpgeeks.com/
sales_at_hirewpgeeks.com
127 Palm Street San Francisco, CA 94111 USA
1.949.591.8153