WordPress has gained popularity in the recent years but there are many who prefers taking WordPress themes and adding some style as well as using a few WordPress plugins to create a site. It is important that you be at the top of your game so you can build anything that your client asks.
WordPress Local/ Server Development
Local development with:
XAMPP or WAMP
Desktop Server
OR
Develop site on a live server
WordPress Theme File Structure
To build a WordPress theme, you need to understand the structure of its theme.
Step 1:
Download WordPress and unzip the files where you want to built your site.
Step 2:
Install Your WordPress by Opening your root folder where you have all WordPress files in your browser, Complete Your Installation by filling the required information.
Step 3:
Now navigate to the location wp-content -> themes in your file structure.
Building the WordPress Starter Theme. WordPress has a few pre-installed themes.
Step 4:
In Themes folder you need to create a new folder with the name of Your Theme. Now you can plan on creating a theme.
Step 5 :
Understanding the Structure of a basic site:
Before we go further with this, let us give you a brief introduction to the parts of a web page.
Boilerplate
The boilerplate code is divided into 4 groups:
Header
Sidebar
Main Content
Footer
In WordPress, These groups are placed in different files(we can also further divide our code in small contents and call them in our files).
Step 6:
Now, Create Some Files in your recently created folder:
style.css
functions.php
header.php
footer.php
sidebar.php
index.php
Also add a folder name Bootstrap And Add bootstrap files in it (here bootstrap 3 is used)Step 7:
Edit your style.css file. At the top of the file, enter a few comments to let WordPress know the theme name.
Copy And paste the code below in your style.css and replace it with your information.
/*
Theme Name: Your Theme Name
Theme URI: https://www.example.com
Author: Author Name
Author URI: https://www.example-author-uri.com
Description: A basic theme from scratch
Version: 1.0
Text Domain: textdomain
*/
Few of the comments:
Theme name: The name of the theme.
Theme URI: URI from where you can download the theme.
Author: Name of the Developer
Description: What is it meant for, what was the idea behind it etc.
Version: If you are planning to upload your theme to WordPress Repository.
License: GNU license for free use.
Tags: These are the tags you can see throughout WordPress.org.
Text Domain: The name used by translators of your theme.
Step 8:
Code to add to functions.php
You can add Bootstrap scripts or style to the functions.php.
<?php
/**
* Enqueue scripts and styles optional if you want to add bootstrap styling
*/
function theme_enqueue_styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), $dependencies );
}
function theme_enqueue_scripts() {
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
/*
Register Menu
*/
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
/**
* Add a sidebar.
*/
function wpdocs_theme_slug_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'textdomain' ),
'id' => 'sidebar-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'textdomain' ),
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpdocs_theme_slug_widgets_init' );
/*
* Add Custom logo support to upload
*/
add_theme_support( 'custom-logo' );
?>
Step 9:
Now, Edit Your header.php
Code to add to the Theme Header file
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="site-content">
<div class="container-fluid">
<div class="row">
<?php
if( function_exists( 'the_custom_logo' ) && has_custom_logo()) {
the_custom_logo(); //add custom logo by uploading through dashboard in Appearance->customization
}
else{?>
<h1>
<a href="<?php echo get_option('home'); ?>">
<?php bloginfo('name'); ?></a>
</h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
<?php } ?>
</div>
</div>
<nav id="navigation" class="navbar navbar-inverse">
<div class="container">
<div class="row">
<div class="blog-nav collapse navbar-collapse" id="nav-list">
<?php
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu',
'items_wrap' => '<ul id="%1$s" class="%2$s navbar-nav ml-auto">%3$s</ul>',
)
);
?>
</div>
</div>
</div>
</nav>
</div>
Step 10:
Code to add to the Theme Footer
Edit footer.php
</div><!-- /.container-->
</div><!-- /.row-->
</div><!-- /.site-content-->
<footer class="footer container-fluid navbar-inverse">
<div class="footer row">
<div class="text-center text-muted">
<p>Basic Blog built by Enterprise Web Cloud</p>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Step 11:
Edit Your index.php
Once this is done, the index file should be sparse. The new index.php is ready.
<?php get_header(); ?>
<div class="container">
<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_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
</div><!-- /.blog-post -->
<?php
endwhile;
} ?>
</div><!--/.blog-main -->
<?php get_sidebar();
get_footer();
?>
Step 12:
Edit Your sidebar.php
Add few Css For styling add below code to your style.css
.blog-nav li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
}
.blog-nav li a {
color: #fff;
}
.blog-sidebar li {
list-style: none;
}
Step 13:
Now,
To Create New Menu:
Login To Your WordPress Dashboard And Follow Steps as shown in Screenshot Below:
To make your WordPress theme work properly, add a few basic functions.
Title tag option help in removing it from header.php and pull it from WordPress.
Post thumbnails will enable you to have thumbnails on every post on your site
You can build as many navigation menus as you want but you’ll need to register them first.
The Loop
This the most exciting part as it will enable to dynamically insert content, and here we do that with the loop. One of the most important function of WordPress and your content will be generated through a loop.
The Loop is quite simple
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- contents of the loop -->
<?php endwhile; endif; ?>
This is self-explanatory: IF there are posts, WHILE there are posts and DISPLAY these posts. Anything that is inside the loop will be repeated.
Conclusion
There is still much more to learn about WordPress theme. Some of the elements that aren’t integrated are navigation, site header, and sidebar which are static HTML.
Now, log in and go to Appearance > Themes and you’ll see your theme. Activate your theme and your work is done. Congratulations!
Download The Complete Theme Package Here
