WordPress is a popular CMS amongst bloggers and website developers for a number of reasons. It does not only make website management look like a stride in the street, but also it makes use of different shared hosting, which implies that the majority of users can simply afford it. WordPress has different plugins for any desires and event and ultimately, it has the most amazing feature, themes. For the majority of WordPress users, selecting the suitable theme is an extremely lengthy process that frequently causes unlimited modification in the stylesheets and code. But, only some people are there who can actually think about learning the process of creating the one. If you are interested to know the theme creation process, then this tutorial is for you.

Let’s start with the Design

There are many options to choose from the designing part i.e. custom CSS, Skeleton, Foundation, Bootstrap etc. Our main focus is on how to make a site looks attractive. So, here we are going to start out theme building process with Bootstrap.

This is the by-default theme on the official site of the Bootstrap.

Install WordPress

Because here we are going to use MAMP and a local server, we know that you’ve all the basics to installations, and remember that FTP is not essential at all.

Build a space for WordPress

Just create a vacant directory on your PC in any drive, and specify your virtual host or local host to that directory.

Download WordPress

Just visit the download page of WordPress and then download the most recent edition of WordPress.

Unzip WordPress

You will get the WordPress in zip file and you need to unzip the same and store the content in any folder in your directory.

Create a database

The most recent editions of MAMP is not available with preinstalled phpMyAdmin. Rather, you will download SQLYog on Windows, or SequelPro on a Mac (both are free programs). For getting an entry into the database, you need to login to the locahost by entering your username and password root. So, if you open your browser and go to the local-server and thinking that the server is on, then you will get the below message.

In MAMP, click on the option ‘Open-WebStart page’.

Build your custom theme

Besides configuring WP, nearly every stuff and activity you do in WP will be stored in the wp-content folder. Everything else is just a central code, and you are advised to don’t mess with that.

In this situation, WordPress StackOverflow and Codex will be the best option for you. We will certainly guide you about building a simple theme, but how you prefer customizing your themes ahead of that depends on you.

In Finder, just go after the path of wp-content > themes to reach your themes folder. There you will get to see the default themes of WordPress like twentythirteen, twentyfourteen, twentyfifteen – and index.php. Make a fresh directory for your new theme and give it a suitable name. Here we are going to name it startwordpress. Any WordPress theme must have at least 2 files – index.php and style.css.

• css: Create style.css inside your custom theme folder. It just includes a comment that notifies WordPress that a theme is present here. Here you will also need to change the name, description author etc.
• php: There is a Bootstrap blog source code in WordPress. You need to move those 2 files namely blog.css and index.html into your custom-theme folder. Change the name of index.html into index.php.

Now you have created your theme. Visit the WordPress cPanel, and click on the menu Appearance and then select themes. Here you will get to see a huge collection of default themes.

Activate your preferred theme and return to your main domain. Isn’t that easy? Technically, you have created a custom theme.

Separate your pages into segments

At present, everything is located in the index.php. But, clearly we will require sidebar, header and footer on each and every web page so they look same. Therefore, we are about to separate index.php into 4 major parts – content.php, sidebar.php, footer.php, and header.php. Let’s start cutting and pasting.

Content – content.php

If the sidebar is the place where all the minor information goes, the content is the place where all the main content and articles of the site go.

Sidebar – sidebar.php

The majority of the sites, particularly blogs will have a small area in side for adding content like whatnot, ads, categories, tags, and archives.

Footer – footer.php

Footer consists of any visible footer, your <?php wp_footer();your JS links and ?> right before </body>. Because we added the .container div within the header, we are about to seal it inside the footer.

Header – header.php

Everything to the main blog header from <! DOCTYPE html> will be inside the header file. Typically the header includes all the required head styles plus the top navigation to the site. The single addition we will make into your code is including <?php wp_head(); ?> before the ending </head>.

Index

This file has to be quite spare now. Actually, it must exclusively be this –

<div class=”row”>

<div class=”col-sm-8 blog-main”>

</div> <!– /.blog-main –>

</div> <!– /.row –>

At present, we are about to include everything back in. You will get your new file namely index.php. Though you have not employed PHP before, this code is easy to understand. get_footer(); get_sidebar(); and get_header(); are the functions that seek their own .php files and add the code. Certainly, they move within their perspective <?php ?> tags to inform the server to parse them like HTML. The function namely content is rather different; however it also does the same. In case you reload your url, your whole website is loaded not, like before. You will observe a top-bar when you are signed out into the back-end.

Main Settings

Before beginning to pull pages and post, we require configuring some main WordPress settings. For instance, we have titled our site “The Bootstrap Blog”, with HTML coding.  We wish the <h1> and <title> of our website to be unfixed via the back-end. In your cPanel, visit the Settings and choose general settings. Now set your title. In the folder header.php, you can simply change the title tag’s contents and main heading1 tag to below code –

<?php echo get_bloginfo( ‘name’ ); ?>

Plus you can change the description with the below code.

<?php echo get_bloginfo( ‘description’ ); ?>

In the end, we wish the title to take us back into the main webpage. Finally the first dynamic change has been made into the webpage. The front-end of the site has to mirror whatever you place in your settings.

Now visit the settings option and go to Permalinks. Click on the name of the post and then implement the changes.

The Loop

The stimulating part is being capable to add content vigorously, and in WP we perform the same with The-Loop. This is the vital WordPress function. All the content is created via a look. In the cPanel, if you just click on Posts, then you’ll see the message “Hello, world!” has posted there by default. What we want is to show that post in out blog. Well, the loop is rather easy. It is self-explanatory – if post are present there, show that post. Anything within the loop will be repetitive. This will be the comments, the content, the date, and the post title for a blog. We are about to include the loop into the file index.php.

Content.php is the only thing present within your loop, which will include the contents of only one post. Thus simple open your content.php and modify the contents. It’s really very easy.

• the_content(); shows the content in your post.
• the_author(); shows the name of the author
• the_date(); represent the date,
• the_title(); shows the blog post title

Menu and Pages

You already know how to create a blog, and change the content of sidebar. Now there is only one feature remaining and this is the navigation and where it takes. Actually, 2 main aspects are there in WordPress – Pages and Posts. They are lookalike and they both make use of Loop. But, pages are the place wherein you can place your content that is not exactly a blog-post. Now here comes the CMS aspect of WP – every single page can be as tailored as you wish. In the cPanel, we have included a webpage so that we can see 2.

Initially, we are about to change the navigation-bar so that the links take us to the pages. Now, in the header.php folder, search and tailor this code.

Various Benefits of building a custom wordpress theme

The most vital thing when creating or making changes in a WordPress blog or website is the selection of a theme. Generally, you have a number of choices to pick from. based on your needs, you can select a particular theme structure and then select your preferred theme that has been created on top of that structure. The majority of people explores several thousands of themes, be it paid or free and then select one that match their requirements and closely look like to what they actually want. The majority of these themes give the facility of customization to twist them to a level, however the generic feel and appearance stays the same.

There are loads of famous theme structures that you can select from. For example, Thesis, Elegant Themes, Genesis among several thousands. At the time of selecting a theme that fulfill your requirements and will mostly act in several instances however it may also have some missing features and limitations.

One more option is to create a Child theme which is more definite to your requirements. You can select a theme that look like in the specifications and feel and look and then create a child theme over it. This has numerous benefits for instance, a more exceptional theme still being capable to employ the enviable qualities of the parent-theme. But, creating a custom-theme would be the best option. Apparently, this will need a few technical skills plus the capability and vision to build the site.

As soon as you have design that is suitable for you, it can be properly applied with the use of a custom-theme. Building a custom theme has lots of various benefits, rather than making use of child theme or a 3^rd party theme

1. SEO (Search Engine Optimization)

A custom-theme is greatly suitable for search engine optimization. Generally, a custom theme bend with nearly no additional source code. Well, no additional features are there that aren’t needed and the needed features can be developed into the theme itself in place of having to employ additional plugins (based on the feature for sure). In addition, you can make use of the suitable HTML tags (such as h3, h2, h1 etc) for your content and you will not need to use over customize your layouts.

The great benefit in search engine optimization here is the clean coding which really makes the site extremely light. In fact, there are so many themes and frameworks that focus in speed which are an alternative always however a custom-theme is the ideal option anyway.

2. Small Static Files

Static files are usually employed for feel and look plus content layout for example, JS (JavaScript) and CSS (Cascading Stylesheets) files can be created very small. You can be certain that every single line of snippet is really being implemented on your site. This lessens the entire size of page and you don’t finish up transferring and catering any more JavaScript code and CSS rules than is really needed. You don’t need to use dozens of codes, which makes your content changeable since it is already tailored for your design within a custom theme. All of these changeable codes can contribute to the mass of your webpage, and make it slow particularly when it’s not appropriately coded.

3. Limit the Usage of Plugin

You can create the functionality of the majority of plugins that you employ directly in your theme. This is particularly true for those plugins that can be used for customization and content layout. This can lessen the reliance on 3^rd party plugin and make your theme faster than before, because no code of plugin need to be added at run time. Not all the plugins are in-built, based on the functionality provided by them.

4. No Feature Overload

The majority of 3^rd party themes have a number of customization code and features. These are needed to do the same so that it can serve to loads of different needs and different clients. Custom themes doesn’t require a lot of specification and features that you would not implement and do not require. All of these unnecessary specifications contribute loads of executable line of codes plus they can potentially decelerate your site.

5. Better Security

The custom WordPress theme is less expected to have big security loopholes, just due to the truth that you are employing less code and less features if nothing else. Though, it is maybe next to impractical to understand of certain regarding bugs, you’re not lingering for a bug patch or safety from a 3^rd party vendor. You can effortlessly solve them whenever you come across them.

6. Exact Design

The theme can really be the precise execution of your design, right attributable to the pixel. In place of having to deciding for someone’s design decisions and be restricted by the features and customization integrated into the theme, you can simply build something which is just what you intended.

7. Uniqueness

The custom theme you have developed in distinctive to your site. It implies that your site is the single one that makes use of it, and doesn’t imitate any of the other sites that are available on the web that makes use of the similar theme with a distinct color scheme.

Disadvantages of creating a custom theme

There are some disadvantages or setbacks for sure when it comes to create a custom theme. However these typically overshadow the benefits.

1. Maintenance

Building a custom theme is a different thing and up keeping it from time to time is another. You’ll require keeping track of the safety concerns and fix the as required eventually. Your theme will require frequent updates and your requirements and needs will change which will require being included.

2. Technical Skills

You can choose to create or build the one on your own, to save a few bucks. Well, it’s quite simple to create a theme; however you will yet need some simple programming skills. Similar to any Do-it-yourself project, it has the ability to overturn and finish up with something which you have to decide for which might be away from what you formerly planned for.

3. Price

Building a custom theme can be costly and high-priced, particularly if you have to appoint experts for creating one. Based upon your programming skills, you might need to spend money for continuing maintenance.