Custom Theme Development

Posted: November 24, 2021. | By: Admin

Ready to start developing WordPress themes ?  You are in the right place.

In this article we will take a look at what WordPress themes are and how they work. And we will develop a sample theme where we will have a header, footer, menu, sidebar and the content of posts or pages will be displayed dynamically in the frontend, and how we will assign CSS and JS files to our theme.

What is a Theme?

A WordPress theme changes the design of your website. Changing your theme changes how your site looks at the frontend, what users see when they browse to your site on the web. There are thousands of free themes available although many WordPress sites uses custom themes.

What Themes Can Do?

Themes take the content and data stored by WordPress and display it in the browser. When you create a WordPress theme, you decide how that content looks and is displayed. There are many options available to you when building your theme. For example

1. Your theme can have different layouts, such as one column or two columns.
2. Your theme can display content anywhere you want it to display.
3. Your theme can design elements using CSS.

 

What Themes are made of?

Required files:

There are two files absolutely required in WordPress theme:

1. index.php – It is the main template file.
2. style.css – the main style file.

Getting Started:

As we all know any files related to WordPress are PHP files. So now we have to know where our theme files are located. Have you set up your local environment? If not please do it and come back here. Anyways I am not going to explain you how to set up your environment.

All the themes will be stored in a folder called ‘wp-content / themes/’ All the theme that are installed will be in the above folder. If you want to develop a theme follow some basic steps which I am sharing below.

 

First of all you need to create subfolder in ‘wp-content / themes/Directory’. Before you start creating the theme you should decide how your theme layout should look like. In this article , we will build a theme that consists of a header, sidebar, content area , footer and a menu section.

In our example I am going to create directory named ‘Awesome Theme’ in

‘wp-content / themes/’. Now create two files index.php and style.css in the created folder.

You can see your theme is found in themes section in admin panel, you can activate it.

Here index.php and style.css are the main files of any one not there your theme won’t work.

If there is nothing coded in these files it will activate and deactivate your theme but you cannot see any styles for your theme.

let’s start to make our theme looks good.

In style.css paste the following code

/*

    Theme Name: Awsome Theme

    Theme URL: http://example.com /

    Author: Kranthi Godari

    version: 1.0 alpha

    Description: This is my first Theme

 */

When you click on Theme details the above written details can be formed.

Now create header.php, footer.php and functions.php in the same directory. Index.php is the only file now which reflects in the front end.

Paste the following code in your header.php

   

   

   

I am header.

And in footer.php paste the following code.

An in index.php file paste the following you can know what actually I did in this.

Now replace the code in index.php with the following

        if (have_posts()) :

            while( have_posts()): the_post(); ?>   

           

           

       

    endif;

    ?>

The above code will show all the posts in the front end.

How to Include Custum CSS and JS to our Theme

Now we will create some files to write css for our theme. So that we can write separately

Create a folder in our theme folder named ‘css’ and create a file in ‘css’ folder as ‘awesome.css’.

Similarly create js folder and create a file awesome.js in ‘Js ‘ folder. Now open functions.php file and write the following code so that we can write our css and js code in those files.

function awesome_script_enqueue() {

wp_enqueue_style( 'customstyle' , get_template_directory_uri() .'/css/awsome.css', array() ,'all' );

wp_enqueue_script( 'customjs', get_template_directory_uri() .'/js/awsome.js', array(), true);

}

add_action( 'wp_enqueue_scripts', 'awesome_script_enqueue');

?>

You can see in source that these css and js are appended to the source. And we can write all styles in awesome.css and JavaScript in awesome.js file.

How to  Create a Custom Menu to our Theme

Now we are going to create our menu in admin module. So that we can have a menu in front end. Paste the following code in functions,php after the code which is already there.

function awsome_theme_setup() {

    add_theme_support( 'menus' );

}

add_action( 'init','awsome_theme_setup');

Now you can create as many menus in your menus section. And now place 

‘’ in header.php so that your menu items can be seen there.

You can see in you admin modules menus section bottom right ‘Display location’  and nothing is pointing to it. Now add this following code in ‘functions.php’ in ‘awesome_theme_support’ function which we created for menu items

register_nav_menu('primary','Primary Header Navigation');

 register_nav_menu( 'secondary', 'Footer Navigation' );

Now in your admin module menu section you can see manage locations option to the menu. You can create as many as menu navigation and we have to place a related code to that.I have created two menus one is menu1 set to Primary location, and menu 2 set to secondary.

Now place the following code in one of the created files. so that we can display our menus in frontend. For example have written in ‘header.php’ with primary menu and in footer.php with secondary.

wp_nav_menu(array('theme_location'=>'primary'));

wp_nav_menu(array('theme_location'=>'secondary'));

You can check out what happened when we place above lines.

Till now we have seen header, footer, and content displaying and also added menus to our themes which we can manage.

How to Create A Sidebar to our Theme

Now we will see how to create a sidebar to our support our theme.

Place the following code in functions.php so that you can see submenu in Appearances with name Widgets and have created sidebar also.

function awsome_widget_setup() {

    register_sidebar(

        array(

            'name'  => 'Main Sidebar',

            'id'    => 'sidebar-1',

            'class' => 'custom',

            'description' => 'Standard Sidebar',

            'before_widget' => '

',

            'before_title'  => '

',

            'after_title'   => '

',

        )

    );

}

add_action('widgets_init', 'awsome_widget_setup');

You can see that Side bar name is Main Sidebar. And we can attach widgets to that side bar and can reflect it to front end by placing small line of code in required php file. Wiill show you small example where we have to place it. You can create as many sidebars as you wanted the format is same as I showed you.

Place it in index.php or header.php or footer.php you can see your side is visible in the frontend.

How To Create Custom and Specialization page Templates

You all know how to create a pages and posts now for a special you don’t need the any on the default type of page. For that we can have page templates to manage the pages.

Let us first create a page in for example ‘about-me’. And add it to menus section. So that you can see it in the menu. You can see the layout and content is displaying similar to other pages. Now we are going to make this page to view in other style.

Now create file named ‘page-about-me.php’ where ‘about-me’ is the word from the url and it should definitely suffixed with page like above so, let me make it clear if you have created a page named ‘Todays Article’ this page will have some url related to this page only pick the url in which it has ‘todays-articles’ and suffix it with page and it will be as ‘page-todays-articles’ and make it a php file. I think it is clear.

Now  copy the code from index.php file and make required changes as you want the page should be. Do the changes and play around with it.

Now lets create a file called ‘page-notitle.php’ and paste the following code in it.

/*

    Template Name: Page No Title

*/

get_header(); ?>

        if (have_posts()) :

            while( have_posts()): the_post(); ?>   

           

           

           

       

    endif;

    ?>

   

Now go to your admin module and try to create a page. Now you will notice a new row in Page Attribute section. If you select that template and created the page then you page will be as of the selected template in the frontend.  So play around this section you will have a lot of stuff to learn. I just said you a bit on this section.

Adding Theme Features

In function.php after ‘add_action( 'init','awsome_theme_setup');  add these line of code so that you can see some theme features for our theme

add_theme_support('custom-background');  Check  it in Appearance section.

add_theme_support('custom-header’);  After placing you this code your header updating is unabled now put this one line of code in you header.php file

 

Now another theme feature is

add_theme_support(post-thumbnails’);   - this will enable to set featured image to your posts in admin module.

If you want to see you thumbnails on the frontend screen you have to have the a line of code in index.php or where ever your posts page is

you can say near ‘thumbnail’ , ‘large’ or ‘small’ or  ‘medium’ as per your requirement.

How To Add and Create Post Formats

In functions.php add this line of code as same as above we did

add_theme_support('post-formats');

now go ahead and open one of your posts on the right you can see a new rows I enabled as “Format” but there are no formats are there

now remove that what you have placed just now and add this line

add_theme_support('post-formats', array('aside', 'image','video')); now  you can see some formats are available

Now replace the index.php file code with the following

        if (have_posts()) :

            while( have_posts()): the_post();?>   

           

       

    endif;

    ?>               

 

And create a files content.php, content-aside.php, content-image.php.

In content.php place this code

 

', esc_url( get_permalink() ) ),'

'); ?>

In content-aside.php

ASIDE POST: ', esc_url(get_permalink() ) ), '

' ); ?>

Posted on: at , in

In content-image.php

IMAGE POST: ', esc_url(get_permalink() ) ), '

' ); ?>

Now check how it works you will be surprised.

Conclusion:

In this article we learnt some of the basics of creating custom plugins. There are lot many to learn.