Home » , » How to create WordPress theme

How to create WordPress theme

This article will show you how to create a simple WordPress theme.
the location of wordpress themes is in the "wp-content/themes/". for precess your new one you create a folder name it as a themes you like to build. there simple structure of themes wordpress are:
- Header
- Main Area
- Sidebar
- Footer Image:
To do this we will have to create the following files into the tutorial_theme directory:
  • header.php - This file will contain the code for the header section of the theme;
  • index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
  • sidebar.php - This file will contain the information about the sidebar;
  • footer.php - This file will handle your footer;
  • style.css - This file will handle the styling of your new theme;

    The header.php file

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Tutorial theme</title>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
     <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <div id="wrapper">
    <div id="header">

    The index.php file

    <?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, no posts matched your criteria.'); ?></p><?php endif; ?>
    <?php get_sidebar(); ?>
    <div id="delimiter">
    <?php get_footer(); ?>

    The sidebar.php file

    <div id="sidebar">
    <h2 ><?php _e('Categories'); ?></h2>
    <ul >
     <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    <h2 ><?php _e('Archives'); ?></h2>
    <ul >
     <?php wp_get_archives('type=monthly'); ?>

    The footer.php file

    <div id="footer">

    The style.css file

    body { text-align: center; }
    #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%;  margin:0px auto; }
    #header { border: 2px #a2a2a2 solid; }
    #content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
    #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
    #delimiter { clear: both; }
    #footer { border: 2px #a2a2a2 solid; }
    .title { font-size: 11pt; font-family: verdana; font-weight: bold; }








Share this acticle :


Post a Comment


Proudly powered by Blogger