On this page, I will show you all the files that you MUST have in your WordPress theme. If you do not have at least one of them, your theme either will not work correctly or will not work at all. So, here, I explain what you need all these files and what sort of role they play. But remember that thanks to my lessons, you can learn how to make only simple themes.
This file usually contains some meta tags, site name, site logo, and site slogan that help your site work better and get your site indexed on Google, Yahoo, etc; also it has your site image, menu, and allows you to add links to some CSS and JS files, scripts.
Let me show an example of what this file must have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"><head profile="http://gmpg.org/xfn/11">
<!---- META (START) ---->
<!---- METAS (END) ---->
<!-- CSS, JS AND OTHER LINKS (START) -->
<!-- STATISTIC (START) --><?php wp_get_archives('type=monthly&format=link'); ?><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!-- STATISTIC (END) -->
<!-- STYLESHEETS (START) --><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" charset="utf-8" />
<!-- STYLESHEETS (END) -->
<!-- ICONS (START) --><link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" type="image/x-icon" /><link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" /><link href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" rel="apple-touch-icon" /><link href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" rel="apple-touch-icon" sizes="152x152" /><link href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" rel="apple-touch-icon" sizes="167x167" /><link href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" rel="apple-touch-icon" sizes="180x180" /><link href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" rel="icon" sizes="192x192" /><link href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" rel="icon" sizes="128x128" /><link rel="shortcut icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.png"/>
<!-- ICONS (END) -->
<!-- CSS, JS AND OTHER LINKS (END) -->
<!---- ELEMENTS (START) ---->
<!---- SCRIPTS (START) ----><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!---- SCRIPTS (END) ---->
<!---- FONTS (START) ---->
<!---- FONTS (END) ---->
<!---- HOSTING ADS (START) ---->
<!---- HOSTING ADS (END) ---->
<!---- WP HEAD ELEMENTS (START) ---->
<?php wp_head(); ?>
<?php wp_footer(); ?>
<!---- WP HEAD ELEMENTS (END) ---->
<!---- ELEMENTS (END) ---->
</head>
<body <?php body_class($class);?> >
<!---- I pasted a table that would be our header; let's think there is only a photo here without links, menu, logos, etc. But this block may be absolutely different. ---->
<table class="header" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" align="center" valign="top">
<tr>
<td>
<div class="header_inside">
</div>
</td>
</tr>
</table>
And if you want to show it up, just past this code (usually used in index.php, sidebar.php, footer.php, single.php, page.php, archive.php, 404.php):
<?php get_header(); ?>
This file contains a copyright of your site and the line “Powered by WordPress” that may be designed as you want. But I will show you the simplest code that you can past in this file.
<div class="footer">
<table class="footer_site_logo" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr width="100%">
<td width="100%">
<span class="footer_site_name">ESTRELLA DESIGN</span>
<span class="footer_site_slogan">Your source for graphic for WordPress, Coppermine, Twitter and Facebook</span>
</td>
</tr>
<tr width="100%">
<td width="100%">
<span class="footer_site_disclaimer">© 2018 Estrella Design | Design by Maria from <a href="http:estrelladesig.tk">Estrella Design</a></span>
</td>
</tr>
</table>
</div>
</body>
</html>
And if you want to show it up, just past this code (usually used in index.php, sidebar.php, single.php, page.php, archive.php, 404.php):
<?php get_footer(); ?>
This file contains all the information about your site and many other things that you can add via WordPress Admin Panel as widgets (simple) or add something manually (advanced). Let’s see the simplest example:
<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar('homepage-sidebar'); //DO NOT REMOVE THIS LINE IF YOU NEED CUSTOM WIDGETS ?> <?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar('homepage-sidebar'); //DO NOT REMOVE THIS LINE IF YOU NEED CUSTOM WIDGETS; THIS FUNCTION WILL WORK ONLY WHEN YOU MAKE SOME CHANGES IN THE FILE "FUNCTIONS.PHP" ?>
<div class="sidebar_block">
<div class="sidebar_thumb">
<span class="sidebar_name"><i class="fa fa-globe"></i> Ads</span> </div>
<div class="sidebar_content" style="padding: 20px 0;">
<center><!-- /7264022/Flaunt_bf300x250_English -->
<div id='div-gpt-ad-1441282664178-0' style='height:250px; width:300px;'>
<script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1441282664178-0'); });
</script>
</div> </center>
</div>
</div>
And if you want to show it up, just past this code (usually used in index.php, single.php, page.php, archive.php, 404.php):
<?php get_sidebar(); ?>
This file contains some codes that act like plugins that you activate/deactivate via WordPress Admin Panel. Sometimes it may be a good alternative for plugins because plugins usually make your site load slower, especially if you have too many ones (I recommend to have 3-5 plugins activated for a good work of your site). This file can expand the functionality of your theme and add more features that are not available as default. For example, it lets you add the “LIKE” button, allow thumbnails, disable some photo sizes for thumbnails that are automatically generated by WordPress when you upload a photo, shorten a post title, allow shortcodes on WordPress pages and posts, and do many other things. You can add so many features that I cannot call all of them. If you want to add something, just contact me, and I will show you a code you need to add to this file. But remember that if you paste a wrong, uncompleted code, it might break your site and “ban” you from accessing your site and WordPress Admin Panel. Fortunately, you can always get it back by deleting wrong lines in this file if you have access to CPanel/FTP and know how to change files and remember WHAT kind of a wrong code you pasted.
This file that is the one of the two you MUST have, contains all the styles of your WordPress theme to make it beautiful. CSS has very many features that you can use to make your site better – everything depends only on your fantasy and wishes and what you can do. But we will not learn anything hard, and I will show you simplest examples that you must have to make your theme better. And yeah, when you create the style.css file in a folder of your WordPress theme, you need to add these lines that will specify your WordPress name, author, author url, and any information. And you can also delete the comments I left in brackets.
/*
Theme Name: Your WordPress Theme Name
Theme URI: Your WordPress Theme URL (you can delete this line or change it)
Author: Your WordPress Theme Author
Author URI: Your WordPress Theme Author URL (you can delete this line or change it)
Description: Some text that describes Your WordPress Theme
Version: 1.0 (you can leave this line the same or delete it)
Tags: wordpress, theme (you can delete this line or change it)
*/
Let’s assume you have a div block with the class “div-box”, inside of which you have a text (let’s think it’s “Hello”), want to make it red, add a black border and add the height, 100px, and the width, 100px, and wish to have your text in the center and have the font, for example, Arial.
So, first, the HTML code for this block is:
<div class="div-box">
HELLO
</div>
And see the right CSS code to make what we want come true:
.div-box {
background: red;
border: 1px solid black;
width: 100px;
height: 100px;
font-family: Arial;
text-align: center;
}
You probably wonder to know what means a dot before the word “div-box”. The answer is easy: when you add a CLASS to your DIV, SPAN, TABLE, ARTICLE, A, STRONG, B, U, STRIKE, and many others, you should add the “.” to specify the style. But when you have an ID to these blocks, you need to add the “#” before the name of your block.
<div id="div-box">
HELLO
</div>
And see the right CSS code to make what we want come true:
#div-box {
background: red;
border: 1px solid black;
width: 100px;
height: 100px;
font-family: Arial;
text-align: center;
}
And remember that you can add CLASS and ID to the same block. It would be good for you when you have to add different styles for a few blocks of the same class.
<div class="div-box-class" id="div-box-id-1">
HELLO
</div>
<div class="div-box-class" id="div-box-id-2">
HELLO
</div>
And see the right CSS code to make what we want come true:
#div-box-id-1 {
background: red;
border: 1px solid black;
width: 100px;
height: 100px;
font-family: Arial;
text-align: center;
}
#div-box-id-2 {
background: black;
border: 1px solid white;
width: 100px;
height: 100px;
font-family: Arial;
text-align: center;
}
CSS code has many features – everything depends only on your fantasy, wishes and knowledge in CSS.
This is one of the two files that you MUST have in a folder of your WordPress theme. It is a homepage of your site, in which there is a code for your site header, sidebar, posts, header, and footer. index.php is responsible for what you see when you just open any site powered by WordPress. I will show you what there is in files of one of my premades I made (you can find them here).
<?php get_header(); ?>
<?php get_header(); ?>
<table class="body_sidebar_posts" border="0" cellpadding="0" cellspacing="0" width="1200" valign="top" align="center">
<tr>
<td class="body_sidebar" width="33%" valign="top">
<?php get_sidebar(); ?>
</td>
<td class="body_posts" width="auto" valign="top">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="body_posts_one"
<?php post_class(); ?>>
<div class="body_posts_two">
<div class="posts_thumbnail">
<span class="meta_date">
<span><?php the_time('m/d/Y'); ?></span>
</span>
<span class="posts_title">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( '%s'), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php trim_title_chars(60, '...'); ?>
</a>
</span>
<div class="posts_content">
<?php the_excerpt('Read the full post'); ?>
</div>
<span class="meta_share">
<span class="meta_share1">
<i class="fa fa-share"></i> Share this post
</span>
<span class="meta_share2">
<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank"><i class="fa fa-google"></i></a>
</span>
</span>
<span class="posts_categories">
<?php the_category( ' ' ); ?>
</span>
<span class="meta_readmore">
<i class="fa fa-edit fa"></i>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Read more</a>
</span>
<?php if ( is_sticky() ) { the_post_thumbnail ( 'home_single_thumb' ); } else { the_post_thumbnail ( 'home_single_thumb1' ); } ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="body_posts_one" style="padding:20px 0;"> NOT FOUND
</div>
<?php endif; ?>
<div class="page_navigation">
<?php kama_pagenavi(); ?>
</div>
</td>
</tr></table>
<?php get_footer(); ?>
This page contains a template what you see when you open a post of any WordPress site. You do not usually need to use any code to use this file because this is a standard file that does its work. So, I will show you what there is in files of one of my premades I made (you can find them here) Note: I simplified this code because many of the context is unnecessary.
<!--?php get_header(); ?-->
<!-- CONTENT (START) -->
<!--?php get_header(); ?-->
<!-- CONTENT (START) -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="body_sidebar_posts" style="width:1250px">
<tbody> <tr>
<td>
<!--?php get_sidebar(); ?-->
</td>
<td>
<!--?php if (have_posts()) : ?-->
<!--?php while (have_posts()) : the_post(); ?-->
<div id="body_posts_one_single">>
<div class="body_posts_two_single">
<!--?php echo esc_attr( sprintf( __( '%s'), the_title_attribute( 'echo=0' ) ) ); ?-->
<div class="posts_thumbnail_single">
<!--?php if ( has_post_thumbnail()) { the_post_thumbnail('single_single_thumb');} ?-->
</div>
<div class="posts_content_single">
<!--?php the_content(); ?-->
</div> </div> </div>
<div class="posts_comments">
<!--?php comments_template(); ?-->
</div> <!--?php endwhile; ?-->
<!--?php endif; ?-->
</td> </tr>
</tbody>
</table>
<!--?php get_footer(); ?-->
This page contains a template what you see when you open a page of any WordPress site. You do not usually need to use any code to use this file because this is a standard file that does its work. So, I will show you what there is in files of one of my premades I made (you can find them here) Note: I simplified this code because many of the context is unnecessary.
<?php get_header(); ?>
<?php get_header(); ?>
<!-- CONTENT (START) -->
<table class="body_sidebar_posts" border="0" cellpadding="0" cellspacing="0" width="1250" valign="top" align="center">
<tr>
<td class="body_sidebar" width="auto" valign="top">
<?php get_sidebar(); ?> </td>
<td class="body_posts" width="830" valign="top">
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<div id="body_posts_one_single" <?php post_class(); ?>>
<div class="body_posts_two_single" >
<div class="posts_thumbnail_single">
<?php if ( has_post_thumbnail()) { the_post_thumbnail('single_single_thumb');} ?>
</div>
<div class="posts_content_single">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</td>
</tr>
</table>
<?php get_footer(); ?>
This page contains a template that you see when you check such an archive of posts sorted by category, author, tags, and date. It’s usually the same as the file “index.php”, but to make it clear, we can add one line to make it better:
<?php the_archive_title(); ?>
This file contains a form of a search box, in which you can type something to search. You do not usually need to change this file unless you do not want to add some new lines to your comment form. But it’s actually a hard thing, and now we are learning to make simple themes – so, when you create the file searchform.php, just past this code in it:
<?php
/**
* The template for displaying searchform.
*/
?>
<form method="get" class="searchform formsearch" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="search-field" name="s" placeholder="<?php esc_attr_e( 'TYPE YOUR TEXT FOR SEARCHING...' ); ?>" value="<?php echo get_search_query(); ?>" />
<button type="submit" class="submit"><i class="fa fa-search fa-lg"></i></button>
</form>
And if you want to show it up, just past this code in any area of your WordPress layout:
<?php get_search_form(); ?>
This file contains a comment form that you can usually see when you open a post and scroll down. You do not usually need to change this file unless you do not want to add some new lines to your comment form. But it’s actually a hard thing, and now we are learning to make simple themes – so, when you create the file comments.php, just past this code in it:
<?php
/**
* The template for displaying Comments.
*/
if ( post_password_required() ) {
return;
}
if ( have_comments() || comments_open() ) { ?>
<!-- COMMENTS (START) -->
<div class="wrap_comments">
<?php if ( have_comments() ) { ?>
<h3>Leave a comment</h3>
<ul class="commentlist">
<!-- main comments function -->
<?php wp_list_comments( $args, $comments ); ?>
</ul><!-- .commentlist -->
<?php if ( 1 < get_comment_pages_count() && get_option( 'page_comments' ) ) { ?>
<!-- comments navigation links -->
<nav id="comment_nav_below">
<div class="nav_previous"><?php previous_comments_link( __( '← Older Comments' ) ); ?></div>
<div class="nav_next"><?php next_comments_link( __( 'Newer Comments →') ); ?></div>
<div class="clear"></div>
</nav><!--.comment-nav-below -->
<?php }
}
if ( ! comments_open() ) { ?>
<h3 class="comments_closed"><?php _e( 'Comments are closed.'); ?></h3>
<?php } else {
/* comment form */
comment_form();
} ?>
</div>
<!-- COMMENTS (END) -->
<?php }
This form usually shows up by using this code that you can past in any area of your WordPress layout:
<?php comments_template(); ?>
This page contains a template that you see when you type something in a search box and get results. It’s usually the same as the file “index.php”, but to make it clear, we can add one line to make it better:
<?php printf( __( 'Search Results for: %s'), '<span>' . get_search_query() . '</span>' ); ?>
This file contains a form that you see when you reach a page that does not exist on the site; may be changed as you want. It’s usually the same as the file “index.php”, but to make it clear, we can add one line to make it better:
<div class="body_posts_two_nofound">
<div class="body_posts_two_nofound">
<div class="posts_thumbnail_nofound">
<div class="body_archive_title_nofound">
NOTHING FOUND </div>
<div class="posts_content_nofound">
Sorry, no posts match your criteria. Maybe, try to search again?
<br>
<br>
<br>
<a href="javascript:history.back(1)">Go Back</a> // <a href="<?php echo get_site_url(); ?>">Go Home</a>
</div>
</div>
This file is usually a photo of a home page/header of your site that lets you see a layout of your theme; you upload it manually via FTP. To get a screenshoot, you can use many sites on the web that let you do it. The sizes of the screenshot are usually 600 x 450 pixels.