how to create wordpress theme thumbnail

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: W7code Theme
Theme URI:http://w7code.com
Author: W7code
Author URI:http://w7code.com
Description: If exist, you can custom.  W7code Theme is perfect for a blog or magazine. Beautifull layout and mobile friendly, totaly responsive. You can custom colors, layout , sidebars , and much more. Full Posts Formats.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0
Tags: blog, magazine ,responsive , custom, custom widgets ,two colums, custom menu ,posts-formats , custom logo, custom logo options ,logo
*/

 

Explanation:

  • 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:

screenshot

 

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:

<?php /*
  @package W7code
  ========================================
  =             W7code                   =
  ========================================
*/?>
<?php get_header(); ?>
  <div class="full-main-area">
    <div class="main-area">
      </div>
    	 <div id="primary-main-area">
    		<?php
    		  if(have_posts()) : while(have_posts())		: the_post();
    		?>
    		<div class="post-content-rect-full-width">
    				<a href="<?php the_permalink(); ?>"><div class="thumbnail"><?php the_post_thumbnail(); ?></div></a>
    					<a href="<?php the_permalink(); ?>" id="title"><h1><?php the_title(); ?></h1></a>
    					<p class="post-info">
    							<span class="post-info-date"><?php the_time('j F , Y'); ?> | </span><span  class="post-info-category">Category:
    						<?php
    							$categories = get_the_category();
    							$separator = ", ";
    							$output = '';
    							if($categories){
    								foreach($categories as $category){
    									$output .= '<a href="'.get_category_link($category->term_id).'"> ' . $category->cat_name .  ' </a>' . $separator;
    								}
    								echo trim($output, $separator);
    							}
    						?>
    					</span> | <span class="post-info-author">Author: <?php the_author(); ?></span>
    					</p>
    			<div id="excerpt"><?php the_excerpt(); ?></div><br /><br />
    		</div><hr />
    		<?php
    			endwhile;
    			else:
    		?>
    		<p>No Post have been found<p>
    		<?php endif; ?>
    		<div align="center" class="pagination">
    			<?php echo paginate_links( $args ); ?>
    		</div>
    	</div>
  		<?php get_sidebar(); ?>
  	</div>
<?php get_footer(); ?>

 

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.“.

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        //Here we display all the content we want display for every post
        //we can display post title, post category, post excerpt, post author, post name, post thumbnail
    <?php endwhile; ?>
<?php endif; ?>

 

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

Your email address will not be published. Required fields are marked *