How to create a WordPress theme from scratch
After the advent of WordPress and its several plugin-based themes, the content management software window saw considerable changes. Nowadays, a single click can perform hundreds of graphics enhancements, which earlier needed ten different front end codes. All thanks to the present convert Html to WordPress themes, we have more than enough layout options and templates to change the overall look of a simple blog, webpage, or an app.
But, have you ever pondered over personalizing the theme?
A theme built strictly according to your taste and requirements is what everyone seeks. The existence of numerous themes and template options has been catering to this need for a while, but what about creating an exclusive theme of your own.
Through this article, we will be covering all the necessary facts and figures required for creating an entirely new theme using WordPress. Therefore, without further ado, let’s delve into the basics.
CREATING A BASIC THEME OUT OF SCRATCH
WordPress themes or stylesheets are generated using several methods such as convert PSD to WordPress theme. Still, the prime function remains the same i.e., to provide appropriate design, layout, and collection to the WordPress file. These themes perform a distinguished function based on the requirements.
Generating a basic theme allows the user to provide new and specific plugin options by making a different child theme altogether with the help of additional .php, CSS, and HTML extensions. Further, the themes use front end codes to convert HTML to WordPress themes, making the executions possible. All you need is to keep your notepad open and basic knowledge of the codes, buckle up, and produce your very own WordPress theme.
STEPS TO CREATE WORDPRESS THEMES
- Before starting with the whole core structure for the theme, you must determine the layout as the coding is eminently based on the layout selected. Here we will be dealing with fundamental themes’ structure consisting of a header, footer, sidebars, and content area.
- After determining the structure, you need to create a folder in the WordPress content/ theme directory and name it ‘basic theme,’ which is going to be our new theme.
- Now, add the following extensions on the folder created inside the theme directory using simple text editors such as notepad or an IDE like Atom.
● Header.php: Contains code for the header section
● Index.php: Contains the main code for the inside area of the theme to convert PSD to WordPress theme.
● Sidebar.php: Contains sidebar’s info.
● Footer.php: Contains code for the footer
● Style.css: Handles the styling and modifications of the new child theme.
DETERMINING THE LAYOUT OF THE THEME
Here’s the list of all the necessary components of the child theme you are creating:
THE HEADER SECTION
This section must specify metatags, keywords, and the title for your new theme. The PHP codes and standard WordPress functions are included in the head section as well.
The simple HTML code used to convert html to wordpress themes required here is:
<html><head><title>Header theme</title><link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”></head><body><div id=”wrapper”><div id=”header”><h1>HEADER</h1></div>
THE INDEX SECTION
The WordPress functions are added in this section, where Main Area Text is also specified to indicate where the text is to be displayed.
The php code for this standard function is:
<?php get_header(); ?><div id=”main”><div id=”content”><h1>Main Area</h1><?php if (have_posts()) : while (have_posts()) : the_post(); ?><h1><?php the_title(); ?></h1><h4>Posted on <?php the_time(‘F jS, Y’) ?></h4><p><?php the_content(__(‘(more…)’)); ?></p><hr> <?php endwhile; else: ?><p><?php _e(‘Sorry, you post did not matched with any criteria.’); ?></p><?php endif; ?></div><?php get_sidebar(); ?></div><div id=”delimiter”></div><?php get_footer(); ?>
THE SIDEBAR SECTION
The sidebars section comprises codes used for listing items such as an archive list or the number of themes option available.
For creating a sub standard sidebar, you’d need the following code:
<div id=”sidebar”><h2 ><?php _e(‘lists’); ?></h2><ul ><?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?></ul><h2 ><?php _e(‘files’); ?></h2><ul ><?php wp_get_files(‘type=monthly’); ?></ul></div>
THE FOOTER SECTION
Footer section contains additional infos, links, hyperlinks and other essentials regarding the new theme. For adding footer in your newly created theme, add this basic code to the footer.php section:
<div id=”footer”><h1>FOOTER</h1></div></div></body></html>
STYLING YOUR THEME
The simple code written below is your greatest aid in changing the overall look of your primary theme. By inserting this code in style.css section, you can easily modify the background and foreground setting such as border, fonts, and overall layout of the basic theme.
body { text-align: center; }#wrapper { display: block; border: 2px #694e44 solid; width:95%; margin:2px auto; }#header { border: 2px #702a2a solid; }#content { width: 80%; border: 2px #694e44 solid; float: right; }#sidebar { width: 35%; border: 2px #694e44 solid; float: left; }#delimiter { clear: both; }#footer { border: 1.5px #702a2a solid; }.title { font-size: 12pt; font-family: Ariel; font-weight: bold; }
BOTTOM LINE
After inserting all the codes mentioned above, your theme is ready to be used and modified. You can further use the CSS and Php extension for availing other customization properties. Having a personalized theme not only makes your ideas come alive but also provides an upper hand while using similar content management software.
