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 sanjibsinha.com. 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:

bloginfo('stylesheet_url');

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_permalink();
the_title();
the_time('l, F jS, Y'); //you can change the format, please search in the codex
the_content()

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:
get_header('blog')
get_header('custom')

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:

GITHUB

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