How to create a simple and responsive theme in WordPress

May 22, 2015
3 min read

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_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. 

Share on:

Want to stay on top of everything?

Get updates on industry developments and the software solutions we can now create for a smooth digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Frequently Asked Questions

1. What is ASSIST Software's development process?  

The Software Development Life Cycle (SDLC) we employ defines the following stages for a software project. Our SDLC phases include planning, requirement gathering, product design, development, testing, deployment, and maintenance.

2. What software development methodology does ASSIST Software use?  

ASSIST Software primarily leverages Agile principles for flexibility and adaptability. This means we break down projects into smaller, manageable sprints, allowing continuous feedback and iteration throughout the development cycle. We also incorporate elements from other methodologies to increase efficiency as needed. For example, we use Scrum for project roles and collaboration, and Kanban boards to see workflow and manage tasks. As per the Waterfall approach, we emphasize precise planning and documentation during the initial stages.

3. I'm considering a custom application. Should I focus on a desktop, mobile or web app?  

We can offer software consultancy services to determine the type of software you need based on your specific requirements. Please explore what type of app development would suit your custom build product.   

  • A web application runs on a web browser and is accessible from any device with an internet connection. (e.g., online store, social media platform)   
  • Mobile app developers design applications mainly for smartphones and tablets, such as games and productivity tools. However, they can be extended to other devices, such as smartwatches.    
  • Desktop applications are installed directly on a computer (e.g., photo editing software, word processors).   
  • Enterprise software manages complex business functions within an organization (e.g., Customer Relationship Management (CRM), Enterprise Resource Planning (ERP)).

4. My software product is complex. Are you familiar with the Scaled Agile methodology?

We have been in the software engineering industry for 30 years. During this time, we have worked on bespoke software that needed creative thinking, innovation, and customized solutions. 

Scaled Agile refers to frameworks and practices that help large organizations adopt Agile methodologies. Traditional Agile is designed for small, self-organizing teams. Scaled Agile addresses the challenges of implementing Agile across multiple teams working on complex projects.  

SAFe provides a structured approach for aligning teams, coordinating work, and delivering value at scale. It focuses on collaboration, communication, and continuous delivery for optimal custom software development services. 

5. How do I choose the best collaboration model with ASSIST Software?  

We offer flexible models. Think about your project and see which models would be right for you.   

  • Dedicated Team: Ideal for complex, long-term projects requiring high continuity and collaboration.   
  • Team Augmentation: Perfect for short-term projects or existing teams needing additional expertise.   
  • Project-Based Model: Best for well-defined projects with clear deliverables and a fixed budget.   

Contact us to discuss the advantages and disadvantages of each model. 

ASSIST Software Team Members

See the past, present and future of tech through the eyes of an experienced Romanian custom software company. The ASSIST Insider newsletter highlights your path to digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Follow us

© 2025 ASSIST Software. All rights reserved. Designed with love.