How to create a simple and responsive theme in WordPress | ASSIST Software Romania
get in touch
>

LIKE

SHARE

Facebook Share Tweet LinkedIn Share

FOLLOW

LinkedIn Follow Xing Follow
Lucian Cazaciuc

Web Developer at ASSIST

This is a quick tutorial for web developers who want to know how to create a simple and responsive theme in Wordpress. To get started with this tutorial you need to have installed Wordpress on your hosting or localhost. 

Wordpress themes are located in  wp-content/themes folder.

Now, we will create a new custom theme called "CustomTheme".

Structure theme is like this:

  • assets/
  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • home.php
  • functions.php
  • style.css

In style.css we have theme header and theme details:

/* Theme Name: CustomTheme

Author: Lucian Cazaciuc

Author URI: https://assist-software.net;

Description: Create simple custom theme in WordPress

Version: 1.0 */
body { text-align: center; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; } 

#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; } 

#delimiter { clear: both; }

#footer { border: 2px #a2a2a2 solid; }

In administration area, at section Appearance - Themes  it appears our theme.

Wordpress themes Activation

Let's activate the theme and go back to homepage. You will see a white page.

The next step is to put the bootstrap theme in our theme. Go to bootstrap website, download files, unzipp and move files to assets directory.
In this file we write all our functions

functions.php:

//recording CSS and JS files

function custom_theme_register(){   

 // javascript files 

 wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.min.js',array( 'jquery' ), '1', true );
 // css files    

wp_register_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css', array(), '1','all' );

wp_register_style( 'stylesheet', get_stylesheet_uri(), array(), '1', 'all' );

} 

add_action('wp_enqueue_scripts', 'custom_theme_register');
//include css files

//includem in tema fisierele css inregistrate anterior

function custom_theme_stylesheets(){  

 wp_enqueue_style( 'bootstrap' );    

wp_enqueue_style( 'stylesheet' ); } 

add_action('wp_enqueue_scripts', 'custom_theme_stylesheets');
//include js files

function custom_theme_js(){   

wp_enqueue_script( 'bootstrap-js' ); }

add_action('wp_enqueue_scripts', 'custom_theme_js');

//homepage template
home.php

<?php  get_header(); ?>
<!-- START CONTENT -->  

<div id="main"> 

<div id="content">

 <h2>Main Area</h2> 

</div>

<div id="sidebar">

<?php  get_sidebar(); ?>;

 </div>

</div> 

<div id="delimiter">

</div>  

<!-- END CONTENT -->

//header template

header.php 

<!DOCTYPE html>

 <html <?php language_attributes(); ?>>

 <head>   

 <meta charset="utf-8">    

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

   <meta name="viewport" content="width=device-width, initial-scale=1">

//include WordPress header 

<?php wp_head(); ?> 

</head>

<body>

//footer template

 footer.php 

<div id="footer">

 	<h2>FOOTER</h2> 

</div>

//include WordPress footer

<?php wp_footer(); ?>

 </body> 

</html>

//sidebar template

sidebar.php

<h2 >Sidebar</h2>

Now, we have a template with bootstrap and must look like this:

 

Navigation Template

Wordpress template hierarchy:

Wordpress theme hierarchy
get_sidebar() - include sidebar from our theme

get_header() - include header from our theme

get_footer() - include footer from our theme
wp_head() - include header from wordpress

wp_footer() - include footer from wordpress
get_template_directory_uri() - return template directory url

Now you know how to build a custom Wordpress theme. Stay tuned because we're planning to publish more "how to" tutorials. 

Do you want to get in touch with us? 

If you are interested in our software development services, you would like to join our team, or you simply want to find out more about us, we’d love to hear from you! Drop us a line and a member of the ASSIST team will get back to you as soon as possible. We are sure we can ASSIST you.

GET IN TOUCH