- Published on
Creating a WordPress theme
This article is related with the theme development in WordPress. This article is intended for beginners in WordPress. In this article we will look onto the basics of theme development in WordPress.
Pre-requisites
– Basic Idea in core PHP
– Basic Idea of what WordPress Is
– Knowledge on Basic HTML
– WordPress Installed
How to Create a Basic WordPress theme ?
Creating a theme and integrating to WordPress is easy. If you think it is hard then obviously it will be hard. There is most to learn but lets keep the basics first without exploring onto the confusing ones. First create a folder and name that folder to something. Here we will call it basic_theme. Now copy that folder into your WordPress/wp-content/themes directory.
Before beginning you must first have the idea of what your theme would look like and must have thought and made up a wire-frame of your design. If you already have an html template thats outstanding.
Lets say we have made three types of layout for our site. Now in order to achieve this we start from the common files.
Common files such as header.php and footer.php. These files will be used in almost all webpages. So, lets start by creating the following files inside your basic_theme folder.
- header.php
- index.php
- footer.php
- style.css
- functions.php
- sidebar.php
style.css
Paste the above code in your style.css file. The additional header information in the style.css provides details about the theme in the form of comments. The stylesheet must have the details on the theme in the form of comments at top. Same theme name cannot be assigned simultaneously to two themes as they will lead to problems.
header.php
Insert the following in your header.php file
>
>
Basically, this is simple html head code that starts the html tag and in the head section the meta information. The function here wp_head() will initialize all the necessary scripts and tags defined infunctions.php which we will be doing shortly.
The index.php file
In this file we will implement the basic content extracting codes
Posted on
In the above code we are using basic loop using while loop. The starting of the code begins with theget_header keyword.
The get_header will include the header.php file. It is a WordPress function that is built into WordPress core. Now that we know what this does the get_footer keyword does the same except it includes the footer.php file. But what does the following line do ?
This keyword checks whether there are any widget sidebar areas defined. If there is defined then that sidebar is shown. Widget is a WordPress functionality which allows the user to drag a component and add them to desired sidebar or footer content from backend.
Now, the loop part is just looping the post contents into structured html.
Sidebar.php
The Footer.php File
Now, that we have completed all the theme files now we move onto the functional part i.e functions.php
The functions.php
In this file all the hooks, action, filters, css enqueue, js enqueues are done. The way you want to change the functionality of your theme will be mostly done from here and later on if a module is to be prepared and will contain alot of files then we will use plugins, which will help in extending the functionality to the site.
For more idea on basic themes see this: WordPress Codex
if ( ! function_exists( 'basic_theme_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which runs
* before the init hook. The init hook is too late for some features, such as indicating
* support post thumbnails.
*/
function basic_theme() {
/**
* Make theme available for translation.
* Translations can be placed in the /languages/ directory.
*/
load_theme_textdomain( 'basic_theme', get_template_directory() . '/languages' );
/**
* Add default posts and comments RSS feed links to.
*/
add_theme_support( 'automatic-feed-links' );
/**
* Enable support for post thumbnails and featured images.
*/
add_theme_support( 'post-thumbnails' );
/**
* Add support for two custom navigation menus.
*/
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'basic_theme' ),
'secondary' => __('Secondary Menu', 'basic_theme' )
) );
/**
* Enable support for the following post formats:
* aside, gallery, quote, image, and video
*/
add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );
}
endif;
add_action( 'after_setup_theme', 'basic_theme_setup' );
/**
* Enqueue scripts and styles.
*/
function basic_theme_scripts() {
wp_enqueue_style( 'protopress-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'basic_theme_scripts' );
Copy and paste the above codes to your functions.php.
Basically, we are firstly setting up the theme adding nav menus. We added two nav menu using the function register_nav_menus and afterwards we en-queued our style.css from the basic_theme_scripts function.
You should now get a simple dynamic blog type homepage. There are numerous internal WordPress functions and better ways optimize and customize your theme the way you want. For the complete reference on theme development functions click here.