If you follow any guide to converting your Photoshop Design to WordPress, you’ll always find that they result in a structure similar to the following. The below is a more detailed view of what a final WP Theme should look like:
Step 5: Append Multidisciplinary WP Tags on your Bootstrap template
This is the final step of our tutorial.
The best thing about WP is that it offers a myriad of built-in functions in its coding reference and structure that can be used to add custom functions and features to a website theme. To incorporate any desired functionality into your WordPress themes, all you need to do is using the right set of inbuilt function tags in your files. The WP framework will take care of everything, and that’s what makes the platform so powerful.
In the previous step, we’ve broken up the index.html file based on the required file structure.
Now it’s time to add WP PHP tags to various theme files – like header.php, index.php, footer.php, and sidebar.php, etc. – which we’ve got in the previous step and then combine them to produce a highly-functional WordPress theme.
For our above example, here we’ve used the <?php bloginfo( $show ); ?> function in header.php to show our site’s title in a link:
<a href=”/<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>” class=”navbar-brand”><?php bloginfo(‘name’); ?></a>
And for menu, we’ve used the <?php wp_nav_menu( $args ); ?> function as follows:
<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’, ‘menu_class’,’nav navbar-nav pull-right’ )); ?>
Now, our header.php file would look like this:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class=”no-js”>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class=”container-fluid”>
<div class=”navbar”>
<a href=”/<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>” class=”navbar-brand”><?php bloginfo(‘name’); ?></a>
<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’, ‘menu_class’,’nav navbar-nav pull-right’ )); ?>
</div>
The footer code for our footer.php will remain same except adding <?php wp_footer(); ?> function.
<?php?>
<footer>
<p>© WPBootstrap 2015</p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
Now let’s move to index.php. To show our thumbnail components, we’ve used <?php dynamic_sidebar( $index ); ?> function.
<?php
get_header(); ?>
<div class=”row”>
<?php dynamic_sidebar(‘sidebar-1’); ?>
<?php dynamic_sidebar(‘sidebar-2’); ?>
<?php dynamic_sidebar(‘sidebar-3’); ?>
<hr>
<?php get_footer(); ?>
That’s not enough! To show our thumbnail components properly, we need to define sidebar-1, sidebar-2 and sidebar-3 in our functions.php file as follows:
function wpbootstrap_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-2’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-3’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
);
}
add_action( ‘widgets_init’, ‘wpbootstrap_widgets_init’ );
This will register three widget areas in the WP dashboard, where we would need to put the “HTML code” for each thumbnail component in sidebar-1, sidebar-2 and sidebar-3 widgets respectively. For example, we’ll use the below code in sidebar-1 widget.
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”//cdn.collectiveray.com/image1.png”>
<div class=”caption”>
<h3>About</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
And so on!
The last thing we need to do is to load our stylesheets. This can be done by using wp enqueue style () in the function.php file, as follows.
// Load the main stylesheet
wp_enqueue_style( ”wpbootstrap-style’, get_stylesheet_uri() );
// Load Bootstrap stylesheet
wp_enqueue_style( ‘wpbootstrap’, get_template_directory_uri() . ‘/css/bootstrap.css’);
For a complete list of all tags and functions available, we recommend you go through these official Codex pages:
- Template Tags: This page provides you a complete list of WP tags, each of which has a dedicated page where you can find more information about a particular tag.
- Function Reference: This surface is a reference guide to all PHP functions practiced in WordPress software. Like Template Tags, every PHP function is linked to a dedicated page wherever it does explain in detail with suitable examples.
After adding essential WP tags and functions, all these files will be placed in a single folder having a similar name to the theme name. After that, you would need to put this folder in /wp-content/themes/ directory of your website installation. And that is the final step of the tutorial!
Once you have done such, you would have a well-functioning responsive WordPress theme utilizing Bootstrap that you package activate via the WP dashboard.
Ready to kick things off?
A few additional thoughts
Slowly but surely, Responsive Web Design should become a dominant standard as building future-ready websites. These days, almost all websites are powered by this fantastic technique to deliver users an optimal viewing and interaction experience, irrespective of the device they are using, whether it’s a phone, tablet, or laptop/desktop device.
According to a recent survey conducted by the Google Webmaster team on Google+, over 81% of people prefer to use a responsive design approach to make their websites render correctly on all kinds of devices.
That’s how? It is essential to learn how to build a WordPress website theme utilizing Twitter Bootstrap or another responsive framework to your web design from a PSD. While there are plenty about available website themes, creating your own custom WP theme using Bootstrap is the ultimate expression of creativity in web design.
Even though WP dominates over 24% of all websites, converting a Photoshop file (PSD) into a well-functioning responsive theme is not as easy as you think. This requires you to have a good grip on writing CSS media queries that ultimately dictate whether or not a template is responsive.
Wouldn’t it do better if you make a pre-coded responsive stylesheet packed, including all essential features?
Thanks to Bootstrap, the world’s most popular responsive front-end framework for making developers’ life more comfortable, this is now a somewhat more straightforward task than it used to be. In this article, we’re working to show you whereby to convert a PSD template within a responsive WordPress theme using Bootstrap as your community framework.
Once again, we first turned our PSD to Bootstrap, therefore essentially, the first part is really and truly a PSD to Bootstrap tutorial.
Later, in the second section, converts the files we developed inside a WordPress theme, therefore at that point, it all becomes a PSD to Bootstrap tutorial.
Download our pack of 25 WordPress (Bootstrap or not) Beginner Themes
Just like always, we like to make your life easier by giving you a bunch of things to help get you started. After you’ve learned the basics about creating a WP theme, why not receive started with one from the WordPress Starter themes.
Top Essential Tip:
Creating a great website design requires quite an advanced skill set. Although writing it yourself might seem like the best option, hiring a great WordPress developer (for example, from Toptal) is probably much more cost-effective in the long run. In essence, you’ll get a great result in a short time.
Final thoughts
That’s all for now about how to build a responsive Bootstrap WordPress theme from a PSD file. Whether you’re a newbie or a pro, this PSD to Bootstrap tutorial and then to WP should surely provide you with the most simplified way of achieving your desired result.
However, if you face any problem in the PSD to WordPress conversion process, there are two things you can do. You can hire a web developer on Toptal, where they have the top 3% of talent worldwide, so you don’t have to worry about quality. Alternatively, you can hire a professional WordPress developer.
Tell us what you think? Do you need some more details on any specific parts of this tutorial/guide? We’d love for this guide to be useful to you, so please help us help you!