W7Code » Wordpress » How to Create WordPress Theme – Part 1

Today we will start create our WordPress Theme. We will learn how to create WordPress Theme index.php and style.css files. This two files are absolutely required in every single WordPress theme.


  1. The index.php, represents the homepage of our website;
  2. The style.css, contains all the theme information like:
    1.  theme Name;
    2. theme Version;
    3. theme Author;
    4. and amongst other.


So lets start build our wordpress theme.

Before we start developing our theme we need a place to save all the theme files. So open the folder “themes” that is localed in htdocs->wordpress->wp-content->themes.

Now we need create a folder to save all the files we can name this folder with the name you want. We will choose “w7code“.

create a folder


Open the folder you have created, and here we will create the index.php and the style.css files.

style and index wordpress



Once you have done that open the file style.css. This file will make our theme recognizable for WordPress. In this file we will create a comment with all the information of our theme, like as, theme name, theme author…

Style.css :



  • Theme Name: Is the name you want your theme be called
  • Theme URI: is where your theme can be found
  • Author: is the name of the author of the theme
  • Author URI: is where you can find more information about the theme author
  • Description: here you can specify some features of your theme
  • License: is the license of your theme ( for example, if you allow sell or is just for personal use)
  • License URI: is where the license agreements can be found
  • Version: is the version of your theme
  • Tags: this you specified to the user can found your theme on the wordpress themes library.


If you want set or change the featured image/preview of your theme, you can save in the folder “w7code“, the image with the name screenshot.png . Like in the following image:



Now we can see our theme settings, like in the image bellow:

preview theme information


After click “Active“. So that way we can see our updates in our theme. Now open the index.php file and write this code there:


Understand Code

Like every block we want display our posts, so that way user can see them. For that we use which is responsible for get all the posts if they exist, else echo “No Post have been found.“.


Some functions for viewing content:

  • the_post_thumbnail(); this function is responsible for get the post thumbnail;
  • the_title(); this function is responsible for get the post title;
  • the_time(‘j F , Y’); this function is responsible for get the time the post was published;
  • get_the_category(); this function is responsible for get the post categories;
  • the_permalink();  this function is responsible for get the post url;
  • the_author(); this function is responsible for get the post author;
  • the_excerpt(); this function is responsible for get the post expert (later we will learn to set a maximum number of words for the excerpt).

We also use:

  • get_header(); to get the header, which is the header.php file.
  • get_footer();  for get the footer, which is the footer.php file.
  • get_sidebar(); to get the sidebar, which is the sidebar.php file.

We will learn how two create the header.php, the footer.php and the sidebar.php in the next lessons.


All the tags we use on the index.file are used to later we style our theme. In the next class we will create our header.php file, which will responsible for link our stylesheet.

In the next lesson we will style our theme. Now our website look something like this:

theme appeareance part1 withou styles


Download all the files of the lesson here.


How to Create WordPress Theme Parts:

  1. How to Create WordPress Theme – Introduction
  2. How to Setup the WordPress Development Environment
  3. How to Create WordPress Theme – Part 1
  4. How to Create WordPress Theme – Part 2


Do you have any doubt? Please feel free to comment it bellow!

Leave a Reply