WordPress Theme

by | Jul 16, 2019 | PHP | 0 comments

Writing our WordPress Theme is relatively simple.

Requirements:

Before we begin, we need to know about the following set of requirements.

  • We need to have full knowledge of WordPress setup, which is either on the local host or live hosting. Click here to know more about WordPress.
  • A conceptual design, either HTML CSS or PSD that follow throughout the development process.
  • Basic knowledge of PHP Programming.

 Lets Start:

The first thing we need to know that everything we do in WordPress is inside the wp-content directory. When we open the wp,-content->theme file, we will find some default WordPress themes like twentyfifteen, twentythirteen, etc.

wordpress theme

We need to create a new file with any name we prefer.

We will call it a “newtheme.”

A WordPress theme contains at least two files, which are index.php and style.css.

Now go into the newtheme folder and create these two files.

In the style.css, we will insert the following comment, which is used to tell the user about the theme details and Meta information.

Go to the WordPress Dashboard, click on the Appearance-> Themes.  We will find NewTheme in the themes collection.

wordpress theme 1

Now, open index.php in the text editor and write the following code.:

Sections:

To develop a standard WordPress Theme, we need to divide our work into sections. It is not necessary to do everything in index.php, but a good programming practice involves standardized. We will divide our Theme into four sections, i.e., header, footer, sidebar, and body. These sections are created into four different files, namely, header.php, footer.php, sidebar.php, and content.php.

 Lets do our Theme Header (Header.php) :

This is embedding HTML code into PHP code.

With some additional changes, it becomes:

The above code is used to get the template directory, CSS,JS etc additional resources can be located.

The above code is used to echo the homepage url.

wordpress theme 2

Footer.php:

The above code is used to place the site description.

sidebar.php: Often sidebars display archive links, recent posts, social media accounts, etc. In our Theme, we’ll create archive links and social media links.

Integration:

In index.php file, we will integrate all the sections. We have to clearly put these sections. Lets see how I have done it.

  • In the above code, we have get_header(), get_sidebar() and get_footer() that all are predefined functions used for embedding sections.

And for the custom section like content.php, we have embedded with the following code:

Style.css: Lets add some charm with CSS.

The Loop:

The Loop is a functionality through which we can insert content into our theme.

content.php:

  • In the above code, anything which is inside the Loop will be repeated, till the page done with all of its posts.

Changed the (index.php):

The Loop inside the index.php file is calling the content.php file every time the page has a new updated post. Inside the content.php file, we have checked if the current post is_single(). This condition is used to hold true if the current page contains only a single post to Loop through. If it is not single, we wanted to link to the post via its title. So we used get_permalink() to get the URL for the particular post. If the page is single, there is no need to link it, and therefore, we have used only the_title() function.

We have displayed the_date() which is used to tell the user when the article/post is published and it’s the_author().  At last, we have used the same concept of is_single() which is used to display the_excerpt() or the_content() of the post.

So, it was easy, with the little charm of CSS, we have got the following result:

wordpress theme 4

  • We are ending this post, but we need to know there is still a lot to learn about WordPress.
  • It was a simple example, but a standard theme would be much complex.

Pin It on Pinterest

Share This