How I joined multiple Bootstrap themes with my official WordPress site

I thought I should write down this without delay and share with my readers. These are bits and pieces of my experiences of writing my official website It was a kind of trial and error method that I had always expected that, well – touch wood, it’d survive somehow.
And it survived the experiments. Google started indexing it and I think the time has also come to play with Google analytic.
Let me finish it very fast and start from the very beginning.
I decided to inject multiple bootstrap CSS styling in my website. It’s a kind of bootstrapping wordpress.
As you know, when you start building a wordpress site from scratch you need few files at the very beginning. They are – style.css and few more PHP files like index, page, home, header, footer, sidebar etc.
I decided to make the front page a static page so I injected a ‘front-page.php’ file in that beginning procedure.
As of now I am keeping three styles – two of them are open source bootstrap theme and the other one is the mystery (please download it from my github repository).
The first step is – make your default style intact so that it does not break.
My ‘style.css’ code:
@import url('css/font-awesome.min.css');
@import url('css/bootstrap.min.css');
@import url('css/animate.css');
@import url('css/style.css');

body {


Next get the link in the ‘header.php’ file:


I don’t want the ‘Home’ navigation in my first page menu bar so just excluded it with a simple code:
wp_list_pages(array('title_li' => '', 'exclude' => 4));
Remember wordpress keeps everything as ‘post’ inside database. My home page post id is 4 and I’m excluding it from the first page navigation.
You know the other wordpress pages more or less follow this same logic:

if ( have_posts() ) : while ( have_posts() ) : the_post();
I decide to get the permalink, time, title, and content after that so the functions are easy:
the_time('l, F jS, Y'); //you can change the format, please search in the codex

You should also keep an error message if something goes wrong with your code.
_e('Sorry, there are no posts.');
As I said before: there are three themes as of now. So I need two more template files. One is for Blog and the other, the custom one is for any other purposes.
You need ‘header-blog’, ‘footer-blog’, ‘header-custom’, and ‘footer-custom’. And in the related template file don’t forget to write like this:

Besides these simple routine I decided to show one category in my custom styling. I’ll write this part in detail.
Finally my website looks like this:

The Home page:

The blog Page:

The Contact page:

The archive page:

And finally I decided to show my ‘PHP’ category posts in the custom styling:

So this is it. For full code please visit my Github repository:



One thought on “How I joined multiple Bootstrap themes with my official WordPress site

  1. Hello Sanji

    Wow! I’m amazed not only with the experience but because even using several CSS you still getting an awesome PageSpeed score.
    I was wondering whether the use of import URL could be replaced with other more efficient method?

    In the meantime thank for keeping posting this kind of great content.


Leave a Reply

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

You are commenting using your 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