In the last part of this tutorial we started with our theme with just two files: index.php and style.css. What we got was a terrible looking website that looked like a notepad text editor. In this part we are going to style our theme to give it a professional look.
Below is what it is going to look like.
For this we are going to use Twitter Bootstrap CSS file that we downloaded in previous tutorial. And yes, the above template is taken from readily available Bootstrap template on below url.
http://getbootstrap.com/examples/blog/
Of course, we have modified it a little bit to keep it simple. Below is the html markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Blog Title</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/blog.css" rel="stylesheet"> </head> <body> <div class="blog-masthead"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item active" href="#">Home</a> <a class="blog-nav-item" href="#">New features</a> <a class="blog-nav-item" href="#">Press</a> <a class="blog-nav-item" href="#">New hires</a> <a class="blog-nav-item" href="#">About</a> </nav> </div> </div> <div class="container"> <div class="blog-header"> <h1 class="blog-title">The Bootstrap Blog</h1> <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> </div> <div class="row"> <div class="col-sm-8 blog-main"> <div class="blog-post"> <h2 class="blog-post-title">Sample blog post</h2> <p class="blog-post-meta">January 1, 2014</p> <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported. Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> </div> <!-- /.blog-post --> <div class="blog-post"> <h2 class="blog-post-title">Another blog post</h2> <p class="blog-post-meta">December 23, 2013</p> <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> <!-- /.blog-post --> <nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> </div> <!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a></li> <li><a href="#">February 2014</a></li> <li><a href="#">January 2014</a></li> <li><a href="#">December 2013</a></li> </ol> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol> </div> </div> <!-- /.blog-sidebar --> </div> <!-- /.row --> </div> <!-- /.container --> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> </footer> </body> </html> |
Copy and save the above code in index.php
Assuming you have already downloaded bootstrap files, search for bootstrap.min.css in the downloaded zip file. Usually it is in bootstrap-{version-no}-dist/css
directory as shown here. Create a directory css in our theme folder and copy it in this folder.
Now view your website. You should see something as below.
Now as you guessed this is because the browser is unable to pick up the correct path to our stylesheets. Reason being we have used a relative path. So lets go ahead and fix it. Replace the below line in head tag
1 |
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> |
with below code
1 |
<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet"> |
What we have done here is replaced the relative path ../../dist/css/bootstrap.min.css
with get_template_directory_url() which is a WordPress function. What it does is return the url to active theme. So in our case it will return http://localhost/wordpress/wp-content/themes/perials
. To this we append /css/bootstrap.min.css
since our bootstrap.min.css is located not in the hellotheme folder but in the hellotheme/css folder.
With the same logic, change the path to blog.css with the below code
1 |
<link href="<?php echo get_template_directory_uri(); ?>/css/blog.css" rel="stylesheet"> |
blog.css
should be placed in same directory as bootstrap.min.css
. You can download it from here
Once you replace and save the above you should see something like below.
Now the next step is to change the static content to the current page content. To do this we’ll be using the WordPress loop. Observe the markup contained in div class="blog-main"
. There are two occurrences of it, one for each blog. The div with blog-post-title class (div class="blog-post-title"
) contains the post title and one with blog-post-meta
contains the publish date of the post. The p
tag following it contains the post content. Now instead of hard-coding the content in the index.php file itself we’ll do it dynamically. That is we’ll let WordPress do it for us by using some of its functions. So replace the two divs having below code
1 2 3 4 5 6 |
<div class="blog-post"> <h2 class="blog-post-title">Sample blog post</h2> <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported. Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> </div><!-- /.blog-post --> |
with this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <div class="blog-post"> <h2 class="blog-post-title">Sample blog post</h2> <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported. Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> </div> <?php } } ?> |
We have wrapped the markup in if ( have_posts() ) { while ( have_posts() ) { the_post();
. This is nothing but the WordPress loop. What it does is process each post to be displayed on the current page. So say on a WordPress page it will process the data for singular page, on a Post it will process data for the particular post and on an Archive page it will repeat itself for each post. The loop will display following information by default for each post
the_title()
the_time()
the_content()
There are many other functions that you can use inside the loop to retrieve information (say featured image, categories, tags etc) for a particular post. The above ones are purposely listed since we are going to use them now.
Replace the below line of code
1 |
<h2 class="blog-post-title">Sample blog post</h2> |
with
1 |
<h2 class="blog-post-title"><?php the_title(); ?></h2> |
We have replaced Sample blog post
with the_title
. This function will return the title of the current post in the loop.
Replace the below line of code
1 |
<p class="blog-post-meta">January 1, 2014</p> |
with
1 |
<p class="blog-post-meta"><?php the_time(); ?></p> |
We have replaced January 1, 2014
with the_time
. This function will return the published date of the current post in the loop.
Replace the below line of code
1 |
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported. Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> |
with
1 |
<p><?php the_content(); ?></p> |
As you guessed the_content()
will return the content, the one that you type in WYSIWYG editor, for the current post in the loop.
We’ll now move away from the loop.
1 |
<h1 class="blog-title">The Bootstrap Blog</h1> |
Replace above line with
1 |
<h1 class="blog-title"><?php echo get_bloginfo('name'); ?></h1> |
Similarly below line
1 |
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> |
needs to be replaced with
1 |
<p class="lead blog-description"><?php echo get_bloginfo('description'); ?></p> |
We have now replaced the The Bootstrap Blog
with the site title and the tagline with the WordPress site tagline.
We’ll now replace the navigation menus with our WordPress pages. Replace the below code in index.php
1 2 3 4 5 |
<a class="blog-nav-item active" href="#">Home</a> <a class="blog-nav-item" href="#">New features</a> <a class="blog-nav-item" href="#">Press</a> <a class="blog-nav-item" href="#">New hires</a> <a class="blog-nav-item" href="#">About</a> |
with
1 2 3 4 5 6 7 8 |
<?php $all_pages = get_pages(); foreach( $all_pages as $page ) { ?> <a class="blog-nav-item" href="<?php echo get_permalink($page->ID); ?>"><?php echo $page->post_title; ?></a> <?php } ?> |
get_pages
returns an array of pages of your WordPress blog. What we do in above code is to loop through this array to generate the markup for our navigation menu.
Below is how the index.php should finally look
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Blog Template for Bootstrap</title> <link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet"> <link href="<?php echo get_template_directory_uri(); ?>/css/blog.css" rel="stylesheet"> </head> <body> <div class="blog-masthead"> <div class="container"> <nav class="blog-nav"> <?php $all_pages = get_pages(); foreach( $all_pages as $page ) { ?> <a class="blog-nav-item" href="<?php echo get_permalink($page->ID); ?>"><?php echo $page->post_title; ?></a> <?php } ?> </nav> </div> </div> <div class="container"> <div class="blog-header"> <h1 class="blog-title"><?php echo get_bloginfo('name'); ?></h1> <p class="lead blog-description"><?php echo get_bloginfo('description'); ?></p> </div> <div class="row"> <div class="col-sm-8 blog-main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <div class="blog-post"> <h2 class="blog-post-title"><?php the_title(); ?></h2> <p class="blog-post-meta"><?php the_time(); ?><a href="#">Mark</a></p> <?php the_content(); ?> </div> <?php } } ?> <nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> </div><!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a></li> <li><a href="#">February 2014</a></li> <li><a href="#">January 2014</a></li> <li><a href="#">December 2013</a></li> </ol> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol> </div> </div><!-- /.blog-sidebar --> </div><!-- /.row --> </div><!-- /.container --> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> </footer> </body> </html> |
Thats all for now. In next part we’ll have a look at how to create the sidebar using widgets. Stay tuned.
Hi
Thanks for the great tutorial so far, well explained and clear.
I’ll wait for the next part.
greetings Zenny