WordPress has gained popularity in recent years, but there are many who prefer 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 can be done with:
- XAMPP or WAMP
- Desktop Server
- OR
- Develop site on a live server
WordPress Theme File Structure
To build a WordPress website design in Mississauga, you need to understand the structure of its theme.
Step 1:
Download WordPress and unzip the files where you want to build 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 in 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 the 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 into small contents and call them in our files).
- The boilerplate code is divided into 4 groups:
Step 6:
Now, create some files in your recently created folder:
style.cssfunctions.phpheader.phpfooter.phpsidebar.phpindex.php
Also, add a folder named 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.
/*
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 the 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 styles 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 a few CSS for styling; add the code below 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 a new menu:
Login to your WordPress dashboard and follow the steps as shown in the screenshot below: To make your WordPress theme work properly, add a few basic functions.
- Title tag option: Helps in removing it from
header.phpand pulling it from WordPress. - Post thumbnails: Enables you to have thumbnails on every post on your site.
- Navigation menus: You can build as many navigation menus as you want, but you’ll need to register them first.
The Loop
This is the most exciting part as it will enable you to dynamically insert content, and here we do that with the loop. One of the most important functions 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 themes. 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!
