How to create your own WordPress Theme with complete features

How to create your own WordPress Theme with complete features

WordPress is an open-source and free website creating tool which is not only most popular but also very easy to use. All types of websites like blogs, business websites, personal websites or ecommerce websites can be easily made in WordPress.

WordPress is basically a CMS (Content Management System), through which you can add, edit and delete pages, blogs, images, products and manage other the website. All web hosts supports WordPress and in this tutorial I will explain how to create a WordPress Theme with all the necessary features.

There is an excellent image slider plugin which is called Slider Revolution. It is a number one source of adding animation effects in slides.

WordPress Theme

A WordPress theme gives the website it’s design. It contains a number of templates, which are php files, and there templates design the different areas of the website – like header, footer, sidebar, etc.

Some of the most used templates are:

1. header.php – it makes the header of the website.

2. footer.php – it makes the footer of the website

3. page.php – it is used for designing the different pages of the website.

4. index.php – it is used for designing the posts of the website.

5. functions.php – it stores custom php functions besides adding features and functionality in our website.

6. archive.php – used for showing posts based on the month, year, day of creation.

7. category.php – this template is used to display the posts in a selected category.

Do you want to add high level security to your site free of charge? Then the answer is installing CDN, check this tutorial – What is CDN?.

8. single.php – this template displays individual post.

9. tag.php – it shows the posts having the selected tag. Tag is basically keyword for the post which can be set from the dashboard.

10. sidebar.php – it will make the left area of our website and will be used to get display widget’s stored information.

11. search.php – it shows the search results.

For making this theme I will be use most of the above templates, so stay tuned.

I theme’s folder name is ‘yogi-herdesigns’ and inside it all the templates are kept. Also note that the css styles will be kept in the ‘style.css’ file, and the images of the theme are kept inside ‘Images’ folder.

The image below shown to which area of the WordPress Website the templates will apply to:

Wordpress Theme Structure

 

WordPress Theme Structure

Header

The header will contain logo on the left, a top menu on the top right corner, a search feature on the middle right and a main menu below it. The structure is shown in the below image:

Header Structure

 

Header Structure

So make a file header.php in the theme folder. Enter the below code lines in it and save.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">  
  <title><?php wp_title( '|', true, 'right' ); ?></title>
  <?php wp_head(); ?>
  <link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/Images/favicon.ico" />
</head>
<body <?php body_class(); ?>>
<div class="header">
    <div>
        <a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img src="<?php echo get_stylesheet_directory_uri() ?>/Images/logo.gif" alt="logo" />
        </a>
        <div class="navigation">
            <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', 'menu_class' => 'first' ) );?>
        </div>
        <form class="search" method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
            <input type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" onblur="this.value=!this.value?'search':this.value;" onfocus="this.select()" onclick="this.value='';"/>
            <input type="submit" id="submit" value=""/>
        </form>
    </div>
    <div id="navigation">
        <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => '', 'menu_class' => 'first' ) );?>
    </div>
</div> 

The code starts with ‘Doctype’ attribute, then in the head section notice that I am setting the charset meta. Inside the title tag I am calling the wp_title which is a function defined in the functions.php file.

The work of this function is to generate the titles for all the posts and pages of the site. This also includes search page, category, tag page and archive page.

If you want to add eCommerce functionalities in your WordPress site then install the WooCommerce plugin. Check this tutorial on How to Install WooCommerce to make your site eCommerce ready.

You will also note that I have not put any link of the stylesheet in the header. This is because WordPress automatically calls the style.css file in the theme’s folder. Therefore it is necessary to keep the style sheet name as ‘style.css’ always.

The get_stylesheet_directory_uri is an inbuilt WordPress function which gives the location of the ‘style.css’ kept in the theme root. Here I used it to get the location of favicon image kept in the ‘Images’ folder (‘Images’ folder is kept in the theme folder).

Next, inside the div having class header I keep the logo, below it I call wp_nav_menu function to call my custom menu with location ‘header-menu’. I will create this menu in functions.php file.

Below the menu is the search feature and is given inside the form’s tag. The search results are shown in the search.php template. Search template is explained later.

In the end I have called our ‘main-menu’ from the wp_nav_menu function. I will also create the ‘main-menu’ in our functions.php file.

Footer

Create a ‘footer.php’ file in the theme folder and enter the below code.

<div class="footer">
  <p>My blog website. All Rights Reserved.</p>
</div>
<?php wp_footer(); ?>
</body>
</html>

As stated earlier, footer.php template will create the footer section of the website. I have just added the website name inside the paragraph section, and called the necessary WordPress footer function wp_footer.

Footer is also the place where you add your custom jQuery scripts.

Page

Create page.php file in the theme folder and add the below code to it:

<?php get_header(); ?>
<div class="body">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <?php the_content(); ?>
    <?php endwhile; else: ?>
      <p><?php _e('Sorry, no posts matched your criteria.','framework'); ?></p>
    <?php endif; ?>
    <div class="clear"></div>
</div>
<?php get_footer(); ?>

This template is used for all the pages of a WordPress website. It calls the header template, by inbuilt get_header() function, to add the header.php file’s content to it. Similarly in the end it calls the footer template from get_footer() function.

In the middle of the header and footer it shows the description of the page from the_content() function.

Index

The most important template in a WordPress theme is the index.php. Inside the index page put the following code:

<?php get_header(); ?>
<div class="body">
  <?php get_sidebar(); ?>
  <div class="content">
    <div class="blog">
      <?php
      $posts_per_page = get_option('posts_per_page');
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      query_posts('posts_per_page=' . $posts_per_page . '&amp;paged=' . $paged); 
      while (have_posts()) : the_post();
      ?>
        <div <?php post_class('blog'); ?>>
          <div class="stats">
            <div class="date">
              <span><?php echo get_the_date('M d');?></span>
            </div>
            <div class="share">
              <a href="" id="tweets"></a>
              <a href="#" id="heart"></a>
              <a href="" id="likes"></a>
            </div>
            <div>
              <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
              <p><?php echo get_the_content();?></p>
            </div>
          </div>
        </div>
      <?php endwhile;?>
      <?php pagination(); ?>
    </div>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

You will notice get_sidebar() function which is used to put the ‘sidebar.php’ template contents to it. The sidebar.php template creates the theme’s sidebar. So actually I am outsourcing the sidebar generation work to this template. I will discuss the sidebar.php template in the sidebar topic.

You can increase the traffic to your website by optimizing the various areas like meta description, content, title and more. You can understand all these by reading the tutorial on SEO Terms that covers all of these things in details.

The index.php page gets the posts, and loops through all of them, to generate the html with their creation date, name and description.

Important Inbuilt WordPress Functions
  • get_option(‘posts_per_page’) – it will fetch the values of the option – Blog pages show at most set by the user in Settings > Reading area of the dashboard.
  • get_query_var(‘paged’) – it gets the current page number. In the code ‘$paged’ (a variable for page no) is set to 1 if get_query_var(‘paged’) retrieves nothing.
  • query_posts – it gets the posts according to the values send to its parameter. The WordPress function query_posts is widely used in WordPress Theme Development.
  • get_the_date – gets the creation date of the post.
  • the_permalink – gets the url of the post.
  • the_title – gives the name (title) of the post.
  • get_the_content – gives the description of the post.
  • pagination – it is a custom function in functions.php, it generates the pagination link at the bottom.

Archive

Create archive.php in the theme folder and insert the following code into it.

<?php get_header(); ?>
<div class="body">
  <?php get_sidebar(); ?>
  <div class="content">
    <h3>
      <?php if ( is_day() ) :    
printf( __( 'Daily Archives: %s', 'framework' ), '<span>' . get_the_date() . '</span>' );
elseif ( is_month() ) :
printf( __( 'Monthly Archives: %s', 'framework' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'framework' ) ) . '</span>' );
elseif ( is_year() ) :
printf( __( 'Yearly Archives: %s', 'framework' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'framework' ) ) . '</span>' );
else :
_e( 'Archives', 'framework' );
endif;
?>
    </h3>
    <div class="blog">
      <?php while (have_posts()) : the_post();?>
      <div
        <?php post_class('blog'); ?>>
        <div class="stats">
          <div class="date">
            <span>
              <?php echo get_the_date('M d');?>
            </span>
          </div>
          <div class="share">
            <a href="" id="tweets"></a>
            <a href="#" id="heart"></a>
            <a href="" id="likes"></a>
          </div>
          <div>
            <a href="<?php the_permalink(); ?>"><h1>
                <?php the_title(); ?>
              </h1>
            </a>
            <p><?php echo get_the_content();?></p>
          </div>
        </div>
      </div>
      <?php endwhile;?>
      <?php wp_pagenavi(); ?>
    </div>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

The archive.php is similar to index.php except for some conditional statement given inside ‘h3’ heading. It displays custom messages if the archive is for day, month or year. You will also notice that there is no query_posts function here.

Category

Create ‘category.php’ in the theme folder and add the following code –

It is almost same as that of archive.php page, just one difference, which is that I have shown the category name with the function single_cat_title.

<?php get_header(); ?>
<div class="body">
  <?php get_sidebar(); ?>
  <div class="content">
    <h3><?php _e('Category','framework'); ?>:-<?php single_cat_title(); ?></h3>
    <div class="blog">
      <?php while (have_posts()) : the_post();?>
        <div <?php post_class('blog'); ?>>
          <div class="stats">
            <div class="date">
              <span><?php echo get_the_date('M d');?></span>
            </div>
            <div class="share">
              <a href="" id="tweets"></a>
              <a href="#" id="heart"></a>
              <a href="" id="likes"></a>
            </div>
            <div>
              <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
              <p><?php echo get_the_content();?></p>
            </div>
          </div>
        </div>
      <?php endwhile;?>
      <?php pagination(); ?>
    </div>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

Tag

This template is called to show all the posts that have a selected tag . Create tag.php file in theme folder, and add the following code to it:

<?php get_header(); ?>
<div class="body">
  <?php get_sidebar(); ?>
  <div class="content">
    <h3>Tag :- <?php single_tag_title(); ?></h3>
    <div class="blog">
      <?php while (have_posts()) : the_post();?>
        <div <?php post_class('blog'); ?>>
          <div class="stats">
            <div class="date">
              <span><?php echo get_the_date('M d');?></span>
            </div>
            <div class="share">
              <a href="" id="tweets"></a>
              <a href="#" id="heart"></a>
              <a href="" id="likes"></a>
            </div>
            <div>
              <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1></a>
              <p><?php echo get_the_content();?></p>
            </div>
          </div>
        </div>
      <?php endwhile;?>
      <?php pagination(); ?>
    </div>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

The only difference it has against the category.php template is the single_tag_title function which I have placed inside the h3 tag. This function fetches the current tag title.

Search

Create search.php file in the theme folder and add the code to it:

<?php get_header(); ?>
<div class="body">
  <?php get_sidebar(); ?>
  <div class="content">
    <h3>
      <?php if ( have_posts() ) : ?>
        <?php _e('Search Results','framework'); ?> - <?php echo get_search_query();?>
      <?php else : ?>
        <?php _e('Sorry, but nothing matched your search criteria. Please try again with some different keywords.','framework'); ?>
      <?php endif; ?>
    </h3>
    <div class="blog">
      <?php while (have_posts()) : the_post();?>
      <div
        <?php post_class('blog'); ?>>
        <div class="stats">
          <div class="date">
            <span>
              <?php echo get_the_date('M d');?>
            </span>
          </div>
          <div class="share">
            <a href="" id="tweets"></a>
            <a href="#" id="heart"></a>
            <a href="" id="likes"></a>
          </div>
          <div>
            <a href="<?php the_permalink(); ?>"><h1>
                <?php the_title(); ?>
              </h1>
            </a>
            <p>
              <?php $content = get_the_content();
            $new_content = strip_tags($content);
            echo substr($new_content, 0, 400);
            ?>
            </p>
          </div>
        </div>
      </div>
      <?php endwhile;?>
      <?php pagination(); ?>
    </div>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

This template shows the search results for a search term. It is also quite similar to the category.php template, just minor adjustment for showing title and first 400 characters from the description field.

By creating WordPress Custom Menu in your WordPress theme will help you to create great navigation system in your WordPress site.

The strip_tags function removes the entire html from the post and substr function gets the first 400 character from the description.

Single

The work of single.php template is for showing a single post one at a time. Create it in the theme folder and add the following to it:

<?php get_header(); ?>
<div class="body">
  <?php get_sidebar(); ?>
  <div class="content">
    <div class="blog">
      <?php while (have_posts()) : the_post();?>
      <div <?php post_class('blog'); ?>>
        <div class="stats">
          <div class="date">
            <span>
              <?php echo get_the_date('M d');?>
            </span>
          </div>
          <div class="share">
            <a href="" id="tweets"></a>
            <a href="#" id="heart"></a>
            <a href="" id="likes"></a>
          </div>
          <div>
            <h1><?php the_title(); ?></h1>
            <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?>
            <div>
              <a href="<?php echo $feat_image; ?>" title="<?php the_title_attribute(); ?>" target="_blank">
                <?php the_post_thumbnail(); ?>
              </a>
            </div>
            <p><?php echo get_the_content();?></p>
          </div>
          <div id="post-meta">
            <span class="categories">
              FILED UNDER:
              <?php
              $categories = get_the_category();
              $separator = ', ';
              $output = '';
              if($categories){
                  foreach($categories as $category) {
                      $output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator;
                  }
              echo trim($output, $separator);
              }
              ?>
            </span>
            <span class="tags">
              <?php the_tags('TAGGED WITH: ',', '); ?>
            </span>
          </div>
        </div>
      </div>
      <?php endwhile;?>
      <div id="commentDiv">
        <!--Comments-->
        <?php
        $withcomments = 1; // force comments form and comments to show on front page
        comments_template();
        ?>
        <!--End-->
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

In single.php page I have added some new functionality, like showing the featured image for the post from the the_post_thumbnail function.

Also I am showing the post tags from the the_tags function and all the post categories name.

I have also called for support for adding comments too.

Sidebar

Create sidebar.php file inside the theme root folder with code:

<div class="sidebar">
  <div class="first">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('homepage-sidebar') ) : endif; ?>
  </div>  
</div>

In this template I check if sidebar with id homepage-sidebar exists. If it does, then I show its content.

Note that homepage-sidebar is a widget which I create in the functions.php. It’s contents can be added from the ‘Appearance>Widgets’ area of dashboard.

Widgets can be changed directly from the dashboard and can be used in multiple location.

Function

As discussed in earlier section, a functions.php file contains the theme functions. I can add new functions to it and can change the theme functionality from it. It is kept in the theme folder.

So create functions.php file in the theme folder and add the following code to it –

<?php
/*Yogi2 setup, adding theme default wordpress features*/
 
add_action( 'after_setup_theme', 'theme_setup' );
 
function theme_setup() {
    /*Adding support for thumbnails and Featured image*/
    add_theme_support( 'post-thumbnails' );
    /*End*/
     
    /*Adds RSS feed links to <head> for posts and comments.*/
    add_theme_support( 'automatic-feed-links' );
    /*End*/
 
    /*Adding Localization Support*/
    load_theme_textdomain( 'framework', get_template_directory().'/lang' );
    /*End*/
     
    /*Custom background*/
    add_theme_support( 'custom-background' );
    /*End*/
 
    /*Custom header*/
    add_theme_support( 'custom-header' );
    /*End*/
 
    /*Post and comment RSS feed links to head*/
    add_theme_support( 'automatic-feed-links' );
    /*End*/
}
/*End*/
 
/*Title Support*/
function add_title( $title, $sep ) {
    global $paged, $page;
 
    if ( is_feed() )
    return $title;
 
    // Add the site name.
    $title .= get_bloginfo( 'name' );
 
    // Add the site description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description &amp;&amp; ( is_home() || is_front_page() ) )
        $title = "$title $sep $site_description";
 
    // Add a page number if necessary.
    if ( $paged >= 2 || $page >= 2 )
    $title = "$title $sep " . sprintf( __( 'Page %s', 'framework' ), max( $paged, $page ) );
 
    return $title;
}
add_filter( 'wp_title', 'add_title', 10, 2 );
/*End*/
 
/*Navigation Menus*/
function register_my_menu() {
  register_nav_menu('top-menu',__( 'Top Menu' ));
  register_nav_menu('main-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );
/*End*/
 
/*Default Sidebar in the index.php page*/
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Blog Sidebar',
'id' => 'homepage-sidebar',
'description' => 'Appears as the right sidebar on the index',
'before_widget' => '<ul class="archives"><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h2><a>',
'after_title' => '</a></h2>',
));
}
/*End*/
 
/*Pagination*/
 
function pagination() {
    if( is_singular() )
        return;
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '<div class="navigation"><ul>' . "\n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
         
        if ( ! in_array( 2, $links ) )
            echo '<li>...</li>';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>...</li>' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li>%s</li>' . "\n", get_next_posts_link() );
     
    echo '</ul></div>' . "\n";
}
 
/*End*/
 
?>

Style

The content of style.css is given below. Note the various identifiers I have added in the top and inside the comments tags. Like I have defined Theme Name as Yogi-HerDesigns, Description as A business, blog and multipurpose theme, and so on.

/*
 Theme Name:   Yogi-HerDesigns
 Description:  A business, blog and multipurpose theme.
 Theme URI:    https://www.yogihosting.com/tutorial-on-creating-a-blog-theme-in-wordpress/
 Author:       Yogi
 Author URI:   https://www.yogihosting.com/tutorial-on-creating-a-blog-theme-in-wordpress/
 License: GNU  General Public License
 License URI:  http://themeforest.net/wiki/support/legal-terms/licensing-terms/
 Tags: pink, translation-ready, editor-style, featured-images, custom-header, custom-menu, right-sidebar, two-columns, theme-options
 Version:      1.0
*/

/*------------------------- Layout styles ------------------------*/
html {
    background: url(Images/bg-body-top.jpg) repeat-x;
}

body {
    margin: 0;
    background: url(Images/bg-body-bottom.jpg) repeat-x left bottom;
}

p a {
    text-decoration: underline;
    color: #8B8B8B;
}

h1 {
    color: #f6008a;
    font-size: 20px;
    font-weight: normal;
}

h3 {
    color: #f6008a;
    margin-top: 0px;
}
/*------------------------- Header --------------------------*/
.header {
    width: auto;
    margin: 0 auto;
}

    .header div {
        width: 960px;
        margin: 0 auto;
        overflow: hidden;
    }

        .header div a#logo {
            display: block;
            height: 110px;
            width: 254px;
            float: left;
        }

            .header div a#logo img {
                border: 0;
            }

        .header div div.navigation {
            float: right;
            overflow: hidden;
            height: 30px;
            width: auto;
            margin: 0;
        }

            .header div div.navigation ul.first {
                background: url(Images/bg-top-navigation-left.png) no-repeat;
                height: 30px;
                padding: 0 0 0 21px;
            }

                .header div div.navigation ul.first li {
                    background: url(Images/bg-top-navigation.png);
                }

            .header div div.navigation ul li.first a {
                border: 0;
            }

            .header div div.navigation ul {
                list-style: none;
                padding: 0;
                margin: 0;
                float: left;
            }

                .header div div.navigation ul li {
                    float: left;
                    background: url(Images/bg-top-navigation2.png);
                    height: 30px;
                }

                    .header div div.navigation ul li a:hover, .header div div.navigation ul.first li.selected a,
                    .body .content div.blog div.paging ul li a:hover, .header div div.navigation ul li.selected a {
                        color: #ef0288;
                    }

                    .header div div.navigation ul li a {
                        text-decoration: none;
                        color: #721c49;
                        font-family: arial;
                        font-size: 14px;
                        text-shadow: 0 1px 0 #fff;
                        border-width: 1px;
                        border-style: none none none solid;
                        border-color: #fff;
                        height: 30px;
                        display: inline-block;
                        line-height: 30px;
                        padding: 0 10px;
                    }

        .header div form.search {
            float: right;
            padding-top: 35px;
        }

            .header div form.search input {
                background: url(Images/interface.gif) no-repeat 0 -90px;
                width: 324px;
                height: auto;
                border: 0;
                float: left;
                padding: 11px 0 11px 40px;
                color: #a1a1a1;
                font-size: 15px;
            }

                .header div form.search input#submit {
                    background: url(Images/interface.gif) no-repeat 0 -150px;
                    width: auto;
                    height: 24px;
                    position: relative;
                    margin: 7px 0 0 -355px;
                    font-size: 14px;
                    padding: 0 0 0 30px;
                    box-shadow: none;
                }

        .header div#navigation {
            height: 40px;
            background: url(Images/bg-navigation.gif) repeat-x;
            width: auto;
        }

            .header div#navigation ul {
                list-style: none;
                margin: 0 auto;
                padding: 0 20px;
                width: 920px;
                overflow: hidden;
            }

                .header div#navigation ul li {
                    float: left;
                    width: 131px;
                    text-align: center;
                }

                    .header div#navigation ul li.current-menu-item a {
                        font-weight: bold;
                        color: #fff;
                        text-shadow: none;
                    }

                    .header div#navigation ul li.current-menu-item {
                        background: url(Images/bg-menu-selected.gif) no-repeat center top;
                        width: 134px;
                    }

                    .header div#navigation ul li a {
                        font-family: arial;
                        color: #fcddf9;
                        text-shadow: 0 -1px 0 #920052;
                        font-size: 14px;
                        text-decoration: none;
                        line-height: 40px;
                        font-weight: normal;
                    }

                        .header div#navigation ul li a:hover {
                            color: #fff;
                            font-weight: bold;
                            text-shadow: none;
                        }
                    /*hover menu*/
                    .header div#navigation ul li ul {
                        position: absolute;
                        display: none;
                        padding-left: 0px;
                        margin-top: -2px;
                        z-index: 1;
                        background-color: #F6008A;
                        border: solid 1px #FFFFFF;
                        width: 131px;
                    }

                        .header div#navigation ul li ul li {
                            list-style: none;
                            float: none;
                            width: 100%;
                            text-align: left;
                            padding-left: 20px;
                            border-bottom: double 1px #A4DACD;
                        }

                            .header div#navigation ul li ul li a {
                                color: #FFFFFF;
                            }

#navigation ul li:hover ul.sub-menu {
    display: block;
}
/*End*/

/*------------------------- Body --------------------------*/
.body {
    width: 960px;
    margin: 10px auto;
    height: auto;
    position: relative;
}

    .body .featured {
        overflow: hidden;
    }

        .body .featured a {
            float: left;
            margin: 0 10px 0 0;
            display: block;
        }

            .body .featured a img {
                border: 0;
            }

        .body .featured div.gallery {
            float: left;
            width: 790px;
        }

            .body .featured div.gallery a {
                float: none;
                margin: 0;
                height: 460px;
            }

            .body .featured div.gallery ul.first {
                margin: 10px 0 0;
                float: left !important;
            }

            .body .featured div.gallery ul {
                padding: 0;
                margin: 10px 0 0 10px;
                float: left;
                list-style: none;
            }

                .body .featured div.gallery ul li {
                    width: 390px;
                }

                    .body .featured div.gallery ul li a {
                        height: auto;
                        margin: 0 0 10px 0;
                        height: 140px;
                    }

                        .body .featured div.gallery ul li a img:hover {
                            filter: alpha(opacity=80);
                            opacity: 0.8;
                        }

    .body div.article {
        width: auto;
        padding: 15px;
        font-family: arial;
        background: url(Images/bg-footer.png);
        overflow: hidden;
        height: 1%;
        clear: both;
    }

        .body div.article div.first {
            width: 525px;
            margin: 0 55px 0 0;
            background: none;
            padding: 0;
        }

            .body div.article div.first p a {
                text-decoration: underline;
                color: #f6008a;
                background: none;
                padding: 0;
                margin: 0;
                display: inline-block;
            }

        .body div.article div {
            float: left;
            width: 325px;
            background: url(Images/separator-dotted.gif) no-repeat center bottom;
            padding: 0 0 21px 0;
        }

            .body div.article div.first h3 {
                color: #f6008a;
            }

            .body div.article div h3 {
                color: #2a1500;
                font-size: 20px;
                font-weight: normal;
                margin: 0;
            }

            .body div.article div p {
                margin: 20px 0;
                font-size: 13px;
                color: #918889;
                line-height: 20px;
            }

            .body div.article div h4 {
                color: #2f1307;
                font-size: 20px;
                font-weight: normal;
                margin: 0;
            }

            .body div.article div a {
                background: url(Images/icons.gif) no-repeat left 3px;
                color: #f6008a;
                text-decoration: none;
                padding: 0 0 0 20px;
                font-size: 13px;
                margin: 0 0 0 20px;
                display: block;
            }

            .body div.article div.connect {
                margin: 0;
                background: none;
                padding: 0;
            }

                .body div.article div.connect h2 {
                    color: #5c5754;
                    font-weight: normal;
                    font-size: 20px;
                    margin: 15px 0 21px;
                }

                .body div.article div.connect a {
                    text-indent: -99999px;
                    display: block;
                    float: left;
                    padding: 0;
                }

                    .body div.article div.connect a#facebook {
                        background: url(Images/icons.gif) no-repeat 0 -80px;
                        width: 30px;
                        height: 31px;
                        margin: 0 0 0 40px;
                    }

                    .body div.article div.connect a#twitter {
                        background: url(Images/icons.gif) no-repeat 0 -261px;
                        width: 30px;
                        height: 30px;
                        margin: 0 0 0 35px;
                    }

                    .body div.article div.connect a#comments {
                        background: url(Images/icons.gif) no-repeat 0 -30px;
                        width: 30px;
                        height: 30px;
                        margin: 0 0 0 35px;
                    }

                    .body div.article div.connect a#flickr {
                        background: url(Images/icons.gif) no-repeat 0 -171px;
                        width: 30px;
                        height: 30px;
                        margin: 0 0 0 35px;
                    }

    .body .sidebar {
        float: left;
        margin: 0 10px 0 0;
        background: url(Images/bg-content.png);
    }

        .body .sidebar div.first {
            background: none;
        }

        .body .sidebar div {
            width: 138px;
            font-family: arial;
            font-size: 14px;
            padding: 15px 11px;
            background: url(Images/border-top.gif) no-repeat center top;
        }

            .body .sidebar div h2 {
                margin: 0;
                font-weight: bold;
                font-size: 15px;
            }

                .body .sidebar div h2 a {
                    text-decoration: none;
                    color: #f6008a;
                    font-weight: normal;
                    font-size: 16px;
                }

            .body .sidebar div ul li a {
                color: #92898a;
                text-decoration: none;
            }

            .body .sidebar div ul li.selected a {
                color: #F6008A;
            }

            .body .sidebar div ul li a:hover {
                color: #f6008a;
            }

            .body .sidebar div ul li.current-menu-item a {
                color: #f6008a;
                font-style: italic;
            }

            .body .sidebar div ul {
                margin: 0 0 60px;
                padding: 0;
                list-style: none;
            }

                .body .sidebar div ul ul {
                    margin: 0 0 0 15px;
                }

                .body .sidebar div ul li {
                    margin: 5px 0 0 0;
                }

    .body .content {
        float: left;
    }

        .body .content .figure {
            height: 260px;
            margin: 0 0 20px 0;
        }

        .body .content .products {
            margin: 0 0 24px;
            background: url(Images/bg-content.png);
        }

            .body .content .products div.paging {
                overflow: hidden;
            }

                .body .content .products div.paging div.first {
                    height: 20px;
                    float: left;
                }

                    .body .content .products div.paging div.first h2 {
                        background: url(Images/interface.gif) no-repeat left -50px #ff0090;
                        font-family: Arial;
                        margin: 0 50px 0 0;
                        font-size: 14px;
                        color: #fff;
                        padding: 0 13px 0 20px;
                        line-height: 20px;
                        float: left;
                        font-weight: normal;
                    }

                    .body .content .products div.paging div.first span {
                        color: #948b8c;
                        font-family: arial;
                        font-size: 12px;
                        font-weight: normal;
                        float: left;
                        line-height: 20px;
                        margin: 0 5px 0 0;
                        height: auto;
                        width: auto;
                        border: 0;
                        padding: 0;
                    }

                    .body .content .products div.paging div.first ul {
                        list-style: none;
                        margin: 0 !important;
                        padding: 0;
                        float: left;
                        width: auto;
                    }

                        .body .content .products div.paging div.first ul li {
                            background-color: #f0f2f1;
                            width: 20px;
                            height: 20px;
                            text-align: center;
                            float: left;
                            margin: 0 2px 0 0;
                            border: 0;
                        }

                            .body .content .products div.paging div.first ul li.selected {
                                border: 0;
                            }

                            .body .content .products div.paging div.first ul li a {
                                color: #948b8c;
                                font-family: arial;
                                font-size: 13px;
                                font-weight: normal;
                                line-height: 20px;
                                display: block;
                                text-decoration: none;
                                border: 0;
                                float: none;
                                height: auto;
                                padding: 0;
                            }

                                .body .content .products div.paging div.first ul li.selected a, .body .content .products div.paging div.first ul li a:hover,
                                .body .content .products div.paging div ul li a:hover {
                                    color: #ff0090;
                                }

                .body .content .products div.paging div {
                    float: right;
                }

                    .body .content .products div.paging div ul {
                        margin: 0;
                        list-style: none;
                        padding: 0;
                        float: left;
                        width: auto;
                        height: auto;
                        color: #a3a3a3;
                    }

                .body .content .products div.paging ul li {
                    float: left;
                    margin: 0 2px 0 0;
                    width: 20px;
                    text-align: center;
                    height: 20px;
                    background-color: #f1f1f1;
                }

                    .body .content .products div.paging ul li.selected {
                        height: 18px;
                        width: 18px;
                        border: 1px solid #ff0090;
                    }

                        .body .content .products div.paging ul li.selected a {
                            color: #ff0090;
                        }

                    .body .content .products div.paging ul li a {
                        color: #a3a3a3;
                        font-family: arial;
                        font-size: 13px;
                        line-height: 20px;
                        text-decoration: none;
                        display: block;
                        font-weight: normal;
                        float: none;
                        height: auto;
                        padding: 0;
                        border: 0;
                    }

                .body .content .products div.paging a {
                    height: 18px;
                    width: auto;
                    border: 1px solid #ff0090;
                    font-family: arial;
                    font-size: 14px;
                    padding: 0 10px;
                    color: #ff0090;
                    float: left;
                    font-weight: normal;
                    text-decoration: none;
                }

            .body .content .products ul {
                margin: 22px 0 0;
                padding: 0;
                list-style: none;
                overflow: hidden;
            }

                .body .content .products ul li.first {
                    margin: 0;
                }

                .body .content .products ul li {
                    width: 170px;
                    float: left;
                    margin: 0 0 0 34px;
                }

                    .body .content .products ul li a img {
                        border: 0;
                    }

                        .body .content .products ul li a img:hover {
                            filter: alpha(opacity=80);
                            opacity: 0.8;
                        }

                    .body .content .products ul li h4 {
                        margin: 5px 0 0;
                        text-transform: uppercase;
                        color: #f6008a;
                        font-family: arial;
                        font-size: 14px;
                        font-weight: normal;
                    }

                    .body .content .products ul li p {
                        margin: 0;
                        color: #b2a7ab;
                        font-family: arial;
                        font-size: 13px;
                    }

                    .body .content .products ul li span {
                        color: #2f1107;
                        font-family: arial;
                        font-size: 14px;
                    }

    .body .sidebar div ul.archives {
        margin: 0 0 60px 12px;
    }

        .body .sidebar div ul.archives li {
            color: #867669;
        }

            .body .sidebar div ul.archives li.current-cat a {
                text-decoration: underline;
            }

            .body .sidebar div ul.archives li a {
                color: #f6008a;
                font-weight: normal;
            }

            .body .sidebar div ul.archives li span {
                color: #867669;
            }

            .body .sidebar div ul.archives li ul {
            }

                .body .sidebar div ul.archives li ul li a {
                    color: #86577B;
                    font-size: 12px;
                    font-weight: normal;
                }

                    .body .sidebar div ul.archives li ul li a:hover {
                        color: #f6008a;
                    }

                .body .sidebar div ul.archives li ul li span {
                    color: #a59b8f;
                    font-size: 12px;
                }

    .body .content div.blog {
        background: url(Images/bg-content.png);
        padding: 10px 20px;
        width: 750px;
        margin: 0 0 60px;
    }

        .body .content div.blog div {
            margin: 0 0 20px 0;
            width: 670px;
        }

            .body .content div.blog div div.stats {
                overflow: hidden;
                margin: 0 0 5px 0;
                width: auto;
            }

                .body .content div.blog div div.stats div.date {
                    background: url(Images/interface.gif) no-repeat left 0;
                    height: 30px;
                    margin: 10px 0 0;
                    float: left;
                    width: 87px;
                    text-indent: 14px;
                }

                    .body .content div.blog div div.stats div.date span {
                        font-family: arial;
                        color: #fff;
                        font-size: 15px;
                        line-height: 30px;
                    }

                .body .content div.blog div div.stats div.share {
                    background: url(Images/separator-blog.gif) repeat-x left 25px;
                    float: left;
                    width: 75px;
                    height: 40px;
                    padding: 0 0 0 505px;
                }

                    .body .content div.blog div div.stats div.share a#tweets {
                        background: url(Images/icons.gif) no-repeat 0 -311px;
                        height: 20px;
                        width: 20px;
                        display: block;
                        text-indent: 99999px;
                        float: left;
                        margin: 0 5px 0 0;
                    }

                    .body .content div.blog div div.stats div.share a#heart {
                        background: url(Images/icons.gif) no-repeat 0 -221px;
                        height: 20px;
                        width: 20px;
                        display: block;
                        text-indent: 99999px;
                        float: left;
                        margin: 0 5px 0 0;
                    }

                    .body .content div.blog div div.stats div.share a#likes {
                        background: url(Images/icons.gif) no-repeat 0 -131px;
                        height: 20px;
                        width: 20px;
                        display: block;
                        text-indent: 99999px;
                        float: left;
                        margin: 0 5px 0 0;
                    }

            .body .content div.blog div div {
                margin: 0;
            }

                .body .content div.blog div div h1 {
                    font-size: 24px;
                    font-family: arial;
                    color: #86577b;
                    margin: 0;
                    text-indent: 90px;
                    font-weight: normal;
                }

                .body .content div.blog div div h2 {
                    margin: 15px 0 0 40px;
                    font-family: arial;
                    font-weight: normal;
                    font-size: 23px;
                    color: #ff0169;
                }

                .body .content div.blog div div p {
                    margin: 5px 0 0 40px;
                    font-family: arial;
                    font-size: 13px;
                    width: auto;
                    color: #89776b;
                    line-height: 24px;
                }

            .body .content div.blog div.paging {
                margin: 80px 0 0;
                overflow: hidden;
                width: auto;
            }

                .body .content div.blog div.paging a {
                    margin: 0;
                    background: url(Images/interface.gif) no-repeat left -50px #ff0090;
                    font-family: Arial;
                    font-size: 14px;
                    color: #fff;
                    padding: 0 13px 0 20px;
                    line-height: 20px;
                    float: left;
                    font-weight: normal;
                    text-decoration: none;
                }

                .body .content div.blog div.paging div {
                    float: right;
                    width: auto;
                }

                    .body .content div.blog div.paging div ul {
                        margin: 0;
                        list-style: none;
                        padding: 0;
                        float: left;
                        width: auto;
                        height: auto;
                        color: #a3a3a3;
                    }

                .body .content div.blog div.paging ul li {
                    float: left;
                    margin: 0 2px 0 0;
                    width: 20px;
                    text-align: center;
                    height: 20px;
                    background-color: #f1f1f1;
                }

                    .body .content div.blog div.paging ul li.selected {
                        height: 18px;
                        width: 18px;
                        border: 1px solid #ff0090;
                    }

                        .body .content div.blog div.paging ul li.selected a {
                            color: #ff0090;
                        }

                    .body .content div.blog div.paging ul li a {
                        color: #a3a3a3;
                        font-family: arial;
                        font-size: 13px;
                        line-height: 20px;
                        text-decoration: none;
                        display: block;
                        font-weight: normal;
                        float: none;
                        height: auto;
                        padding: 0;
                        background: none;
                        border: 0;
                    }

                .body .content div.blog div.paging div a {
                    border: 1px solid #FF0090;
                    color: #FF0090;
                    float: left;
                    font-family: arial;
                    font-size: 14px;
                    font-weight: normal;
                    height: 18px;
                    padding: 0 10px;
                    text-decoration: none;
                    width: auto;
                    background: none;
                }

    .body .content div.about, .body .content div.news {
        width: 730px;
        background: url(Images/bg-content.png);
        padding: 20px 30px 200px;
    }

        .body .content div.about h2, .body .content div.news h2 {
            margin: 0 0 20px;
            font-family: arial;
            font-size: 30px;
            color: #F6008A;
            font-weight: normal;
        }

        .body .content div.about h3, .body .content div.news h3 {
            color: #2f100d;
            font-family: arial;
            font-weight: normal;
            font-size: 20px;
            margin: 0;
        }

        .body .content div.about p {
            margin: 0 0 40px;
            line-height: 24px;
            font-family: arial;
            color: #89776B;
            font-size: 13px;
        }

        .body .content div.news p {
            margin: 0 0 20px;
            line-height: 24px;
            font-family: arial;
            color: #89776B;
            font-size: 13px;
        }

            .body .content div.about p a, .body .content div.news p a {
                color: #f6008a;
            }

/*------------------------- Paging --------------------------*/
.navigation ul {
    padding: 20px 0;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration: none;
}

.navigation li {
    display: inline;
}

    .navigation li a,
    .navigation li a:hover,
    .navigation li.active a,
    .navigation li.disabled {
        background-color: #337ab7;
        border-radius: 3px;
        cursor: pointer;
        padding: 12px;
        padding: 0.75rem;
    }

        .navigation li a:hover,
        .navigation li.active a {
            background-color: #009900;
        }

/*------------------------- Footer --------------------------*/
.footer {
    padding: 37px 0 10px;
}

    .footer p {
        font-family: arial;
        font-size: 14px;
        color: #918889;
        text-align: center;
    }
/*Tag*/
#post-meta {
    background-color: #f5f5f5;
    clear: both;
    font-size: 11px;
    padding: 7px 10px 5px;
    text-transform: uppercase;
    margin-top: 20px;
}

.categories {
    background: url("Images/icon-categories.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    padding: 0 0 3px 22px;
}

#post-meta a, a.more-link {
    color: #009900;
}

.tags {
    background: url("Images/icon-tags.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    margin: 0 0 0 10px;
    padding: 0 0 3px 20px;
}
/*End*/
/*Wordpress Comment*/

/*End*/
/*WooCommerce*/
#main, .body .woocommerce {
    margin: 20px auto;
    overflow: hidden;
    width: 960px;
    color: #918889;
    font-size: 13px;
    line-height: 20px;
}

.wooArchiveProductDiv {
    float: right;
    width: 750px;
}

.wooSidebarDiv {
    float: left;
    width: 175px;
}

.page-title, .woocommerce-result-count, .woocommerce-ordering {
    float: left;
}

.woocommerce-result-count, .woocommerce-ordering {
    margin-top: 18px;
    padding-left: 50px;
}

p.form-row {
    margin-top: 10px;
}

#order_review_heading {
    clear: left;
    padding-top: 40px;
}

.woocommerce ul.products, .upsells ul.products {
    list-style: none outside none;
    margin: 10px 0 1em;
    padding-left: 0px;
}

    .woocommerce ul.products:after, .upsells ul.products:after {
        clear: both;
        content: "";
        display: block;
    }

    .woocommerce ul.products li, .upsells ul.products li {
        float: left;
        margin: 2px 3.5% 2.992em 3px;
        padding-top: 5px;
        position: relative;
        width: 21%;
        height: 100%;
        box-shadow: 0px 0px 6px 6px #d4d2d2;
        text-align: center;
    }

.woocommerce div.related ul.products li {
    width: 16.50%;
}

.woocommerce ul.products li.first, .upsells ul.products li.first {
    clear: left;
}

.woocommerce ul.products li a, .upsells ul.products li a {
    text-decoration: none;
    display: block;
}

    .woocommerce ul.products li a.button, #main .product .summary .cart .button, .upsells ul.products li a.button {
        background-color: #191919;
        border-radius: 2px;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        font-family: inherit;
        left: auto;
        line-height: 1em;
        margin-bottom: 5px;
        overflow: visible;
        padding: 6px 10px;
        position: relative;
        text-decoration: none;
        white-space: nowrap;
        font-size: 11px;
    }

#main .product .summary .cart .button {
    margin-left: 30px;
}

.woocommerce ul.products li a.button:hover, #main .product .woocommerce .cart .button:hover {
    background-color: #7C5C3E;
}

.woocommerce ul li a img:hover, .thumbnails a img:hover, .upsells ul li a img:hover {
    opacity: 0.7;
}

.woocommerce ul.products li a span.onsale, #main .product span.onsale {
    background: -moz-linear-gradient(center top, #7C5C3E 0px, #D53267 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 20px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    line-height: 32px;
    margin: 0;
    min-height: 32px;
    min-width: 32px;
    padding: 4px;
    position: absolute;
    text-align: center;
    text-shadow: 0 -1px 0 #85AD74;
}

.woocommerce ul.products li a span.onsale {
    top: 6px;
    right: 6px;
}

#main div.product span.onsale {
    top: -20px;
    right: 640px;
    z-index: 10;
}

#main div.related span.onsale {
    top: 0px;
    right: 0px;
}

#main div.upsells span.onsale {
    top: 0px;
    right: 0px;
    z-index: 10;
}

.woocommerce .star-rating, #main .woocommerce-tabs #tab-reviews #reviews #comments .star-rating, .upsells .star-rating {
    background: url("Images/ico-star.png") repeat-x scroll left 0 rgba(0, 0, 0, 0);
    height: 16px;
    width: 80px;
    margin-left: 30px;
    margin-bottom: 10px;
}

    .woocommerce .star-rating span, #main .woocommerce-tabs #tab-reviews #reviews #comments .star-rating span, .upsells .star-rating span {
        background: url("Images/ico-star.png") repeat-x scroll left -32px rgba(0, 0, 0, 0);
        float: left;
        height: 0;
        overflow: hidden;
        padding-top: 16px;
    }

.woocommerce .products h3, .upsells .products h3 {
    color: #f6008a;
    font-family: arial;
    font-size: 14px;
    font-weight: normal;
    margin: 5px 0 0;
    text-transform: uppercase;
}

    .woocommerce .products h3:hover, .upsells .products h3:hover {
        color: #7C5C3E;
    }

.woocommerce ul.products li a span.price del span.amount, .woocommerce p.price del span {
    font-size: 17px;
}

.woocommerce ul.products li a span.price ins span.amount, .woocommerce p.price ins span {
    font-size: 20px;
}

.woocommerce ul.products li a span.price, .woocommerce p.price, .upsells ul.products li a span.price {
    color: #2f1107;
    font-family: arial;
    font-size: 14px;
}

#main .product {
    background-color: #FFFFFF;
    position: relative;
}

.woocommerce-breadcrumb, .woocommerce-breadcrumb a, .woocommerce-message a {
    color: #7C5C3E;
    font-size: 14px;
}

    .woocommerce-breadcrumb a, .woocommerce-message a {
        text-decoration: none;
        font-size: 17px;
    }

        .woocommerce-breadcrumb a:hover, .woocommerce-message a:hover {
            text-decoration: underline;
        }

        .woocommerce-breadcrumb a.home, .woocommerce-message a {
            font-weight: bold;
        }

#main .product .images img {
    max-width: 330px;
}

#main .product .images {
    float: left;
    width: 350px;
}

#main .product .summary {
    padding-top: 0px;
    float: left;
    width: 400px;
}

    #main .product .summary h1 {
        margin-top: 0px;
    }

.woocommerce .product_meta, .woocommerce .product_meta a {
    color: #7C5C3E;
    text-decoration: none;
}

    .woocommerce .product_meta a:hover {
        text-decoration: underline;
    }

#main .product .summary .cart .quantity .qty, .woocommerce .shop_table .product-quantity .quantity .qty {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #C8BFC6 -moz-use-text-color #C8BFC6 #C8BFC6;
    border-image: none;
    border-radius: 2px 0 0 2px;
    border-style: solid none solid solid;
    border-width: 1px 0 1px 1px;
    box-shadow: 0 0 2px 0 #F7F6F7 inset;
    float: left;
    font-weight: bold;
    height: 28px;
    padding: 0;
    text-align: center;
    width: 43px;
}

#main .product .summary .cart .quantity .plus {
    border-bottom: 0 none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    right: 337px;
    top: 0;
}

#main .product .summary .cart .quantity .minus {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    bottom: -29px;
    right: 337px;
}

#main .product .summary .cart .quantity .plus, #main .product .summary .cart .quantity .minus, .woocommerce .shop_table .product-quantity .quantity .minus, .woocommerce .shop_table .product-quantity .quantity .plus {
    background: -moz-linear-gradient(center top, #F7F6F7 0px, #E0DADF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #C8BFC6;
    border-radius: 2px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.075) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #5E5E5E;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 15px;
    line-height: 13px;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    vertical-align: text-top;
    width: 20px;
}

#main .product .summary .buttons_added, .woocommerce .shop_table .product-quantity .quantity {
    position: relative;
}

.woocommerce-tabs {
    clear: both;
    padding-top: 5px;
}

    .woocommerce-tabs ul.tabs {
        list-style: none outside none;
        padding-left: 0px;
        margin-bottom: 0px;
        height: 30px;
    }

        .woocommerce-tabs ul.tabs li {
            float: left;
            padding-right: 40px;
        }

            .woocommerce-tabs ul.tabs li a {
                padding: 8px 50px;
                background-color: #9A99FF;
                color: #FFFFFF;
                text-decoration: none;
                font-size: 18px;
                border-bottom: solid 2px #624428;
            }

                .woocommerce-tabs ul.tabs li a:hover {
                    text-decoration: underline;
                }

            .woocommerce-tabs ul.tabs li.active a {
                border-bottom: solid 2px #FFFFFF;
                border-left: solid 2px #624428;
                border-right: solid 2px #624428;
                border-top: solid 2px #624428;
            }

    .woocommerce-tabs #tab-description, .woocommerce-tabs #tab-reviews, .woocommerce-tabs #tab-additional_information {
        clear: both;
        border: 2px solid #624428;
        padding: 5px;
    }

        .woocommerce-tabs #tab-description h2, #main .woocommerce-tabs #tab-reviews #reviews #comments h2, #main .woocommerce-tabs #tab-additional_information h2, #main .woocommerce-tabs #tab-reviews #reviews #comments .add_review a, h3#reply-title {
            color: #624428;
        }

#commentform p.comment-form-author input#author {
    margin-left: 33px;
}

#commentform p.comment-form-email input#email {
    margin-left: 35px;
}

#commentform p.comment-form-comment textarea {
    margin-left: 5px;
}

#main .product .woocommerce #backgroundDiv {
    background: url( "Images/itemBackground.jpg" ) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 60px;
}

#main .product .woocommerce h1 {
    padding-left: 10px;
    padding-top: 5px;
}

#main .product .woocommerce h2 {
    color: #624428;
    font-family: Trebuchet MS;
    font-size: 18px;
    padding-left: 42px;
    margin-top: 0px;
    padding-top: 8px;
}

.woocommerce table.shop_table {
    border-top: 1px solid #CCCCCC;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-collapse: separate;
    border-radius: 5px;
    margin: 0 -1px 24px 0;
    text-align: left;
    width: 100%;
}

    .woocommerce table.shop_table th {
        font-weight: bold;
        line-height: 18px;
        padding: 9px 12px;
    }

    .woocommerce table.shop_table td {
        border-top: 1px solid #CCCCCC;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 6px 12px;
    }

        .woocommerce table.shop_table td a.remove {
            border-radius: 100%;
            color: #D53267;
            display: block;
            font-size: 1.5em;
            font-weight: bold;
            height: 1em;
            line-height: 1;
            text-align: center;
            text-decoration: none;
            width: 1em;
        }

            .woocommerce table.shop_table td a.remove:hover {
                background-color: #D53267;
                color: #FFFFFF;
            }

        .woocommerce table.shop_table td, .woocommerce table.shop_table td a {
            color: #7C5C3E;
        }

            .woocommerce table.shop_table td.product-name {
                width: 140px;
            }

            .woocommerce table.shop_table td a {
                font-weight: bold;
                text-decoration: none;
            }

            .woocommerce table.shop_table thead tr, .woocommerce table.shop_table td.actions, .woocommerce #payment ul li div, .woocommerce #payment div.form-row {
                background-color: #F1F1F1;
                background: -moz-linear-gradient(center top, #FFFFFF 0%, #F1F1F1 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
                color: #666666;
                text-shadow: 0 1px 0 #FFFFFF;
            }

    .woocommerce table.shop_table tbody tr {
        background-color: #F1F1F1;
        background: -moz-linear-gradient(center top, #FFFFFF 0%, #F1F1F1 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    }

    .woocommerce table.shop_table td a:hover {
        text-decoration: underline;
    }

    .woocommerce table.shop_table td.actions .coupon {
        float: left;
    }

    .woocommerce table.shop_table td.actions {
        text-align: right;
    }

.woocommerce .cart-collaterals {
    color: #7C5C3E;
    padding: 10px;
    border-top: 1px solid #CCCCCC;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
}

    .woocommerce .cart-collaterals h2 a {
        color: #7C5C3E;
        text-decoration: none;
    }

        .woocommerce .cart-collaterals h2 a:hover {
            text-decoration: underline;
        }

    .woocommerce .cart-collaterals button {
        background-color: #FFAAD4;
    }

    .woocommerce .cart-collaterals #calc_shipping_state, .woocommerce .cart-collaterals #calc_shipping_postcode {
        width: 239px;
    }

.woocommerce .shop_table .product-quantity .quantity .plus {
    border-bottom: 0 none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    right: 98px;
    top: 0;
}

.woocommerce .shop_table .product-quantity .quantity .minus {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    bottom: -30px;
    right: 98px;
}

.woocommerce .shop_table tr.cart_table_item {
    background-color: #FFFFFF;
}

.woocommerce p.woocommerce-info {
    margin-top: 0px;
}

    .woocommerce p.woocommerce-info a, .woocommerce form.login p.form-row a, .woocommerce p.myaccount_user a, .woocommerce .col2-set a {
        color: #7C5C3E;
        text-decoration: none;
    }

        .woocommerce p.woocommerce-info a:hover, .woocommerce form.login p.form-row a:hover, .woocommerce p.myaccount_user a:hover, .woocommerce .col2-set a:hover {
            text-decoration: underline;
        }

.woocommerce #customer_details, .woocommerce #order_review, .woocommerce .login, .woocommerce .checkout_coupon {
    padding: 10px;
    background-color: #FFFFFF;
    display: inline-block;
}

.woocommerce #order_review {
    width: 98%;
}

.woocommerce #payment ul {
    list-style: none outside none;
}

    .woocommerce #payment ul li div p {
        padding: 10px;
    }

.woocommerce #payment div.form-row {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #CCCCCC;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce #customer_details .col-1 {
    float: left;
    width: 48%;
}

.woocommerce #customer_details .col-2 {
    float: right;
    width: 48%;
    clear: right;
}

    .woocommerce #customer_details .col-1 .form-row-first, .woocommerce #customer_details .col-1 .form-row-last, .woocommerce #customer_details .col-2 .form-row-first, .woocommerce #customer_details .col-2 .form-row-last, .woocommerce form.login .form-row {
        float: left;
        overflow: visible;
        width: 47%;
    }

        .woocommerce #customer_details .col-1 .form-row-first input, .woocommerce #customer_details .col-1 .form-row-last input, .woocommerce #customer_details .col-2 .form-row-first input, .woocommerce #customer_details .col-2 .form-row-last input, .woocommerce #customer_details .col-1 .create-account #account_password_field input, .woocommerce #customer_details .col-1 .create-account #account_password-2_field input, .woocommerce .form-row input[type="text"], .woocommerce .form-row-first input[type="text"], .woocommerce .form-row-first input[type="password"], .woocommerce .form-row-last input[type="password"] {
            margin-top: 5px;
            width: 202px;
            border: 1px solid #CCCCCC;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) inset;
            height: 20px;
        }

    .woocommerce #customer_details .col-1 .form-row, .woocommerce #customer_details .col-2 .form-row {
        margin: 0 0 6px !important;
        padding: 3px;
    }

    .woocommerce #customer_details .col-1 #billing_company_field input, .woocommerce #customer_details .col-1 #billing_address_1_field input, .woocommerce #customer_details .col-1 #billing_city_field input, .woocommerce #customer_details .col-1 #billing_address_2_field input, .woocommerce #customer_details .col-2 #shipping_company_field input, .woocommerce #customer_details .col-2 #shipping_address_1_field input, .woocommerce #customer_details .col-2 #shipping_address_2_field input, .woocommerce #customer_details .col-2 #shipping_city_field input, .woocommerce #customer_details .col-2 #order_comments_field textarea, .woocommerce #customer_details .col-1 .create-account input, .woocommerce form.login .form-row input[type="text"], .woocommerce form.login .form-row input[type="password"] {
        margin-top: 5px;
        width: 420px;
        border: 1px solid #CCCCCC;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) inset;
        height: 20px;
    }

    .woocommerce #customer_details .col-2 #order_comments_field textarea {
        height: 80px;
    }

    .woocommerce #customer_details .col-1 #billing_country_field #billing_country, .woocommerce #customer_details .col-2 #shipping_country_field #shipping_country {
        margin-top: 5px;
        width: 425px;
    }

.form-row .required {
    color: #CC0000;
    font-weight: bold;
    border: none;
}

.woocommerce p.woocommerce-info {
    margin-bottom: 0px;
}

.woocommerce form.login, .woocommerce form.checkout_coupon {
    border: 1px solid #E7E7E7;
    border-radius: 5px;
    margin: 20px 0;
    padding: 5px;
    text-align: left;
}

.woocommerce ul.woocommerce-error {
    background-color: #FCD5D5;
    background-image: url("Images/error.png");
    color: #C22A69;
}

.woocommerce ul.woocommerce-error {
    background-position: 20px center;
    background-repeat: no-repeat;
    border: 1px solid;
    clear: both;
    line-height: 25px;
    list-style: none outside none !important;
    margin: 10px 30px;
    padding: 25px 20px 25px 70px;
    width: 60%;
}

.woocommerce h2 {
    color: #624428;
}

.woocommerce .form-row-first input[type="password"] {
    margin-left: 60px;
}

.woocommerce .form-row-last input[type="password"] {
    margin-left: 5px;
}

.woocommerce #editAddressDiv #billing_country_field #billing_country, .woocommerce #editAddressDiv #shipping_country_field #shipping_country {
    margin-left: 50px;
}

.woocommerce #editAddressDiv #billing_first_name_field #billing_first_name, .woocommerce #editAddressDiv #shipping_first_name_field #shipping_first_name {
    margin-left: 35px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_last_name_field #billing_last_name, .woocommerce #editAddressDiv #shipping_last_name_field #shipping_last_name {
    margin-left: 37px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_company_field #billing_company, .woocommerce #editAddressDiv #shipping_company_field #shipping_company {
    margin-left: 15px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_address_1_field #billing_address_1, .woocommerce #editAddressDiv #shipping_address_1_field #shipping_address_1 {
    margin-left: 55px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_address_2_field #billing_address_2, .woocommerce #editAddressDiv #shipping_address_2_field #shipping_address_2 {
    margin-left: 120px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_city_field #billing_city, .woocommerce #editAddressDiv #shipping_city_field #shipping_city {
    margin-left: 31px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_state_field #billing_state, .woocommerce #editAddressDiv #shipping_state_field #shipping_state {
    margin-left: 17px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_postcode_field #billing_postcode, .woocommerce #editAddressDiv #shipping_postcode_field #shipping_postcode {
    margin-left: 16px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_email_field #billing_email, .woocommerce #editAddressDiv #shipping_email_field #shipping_email {
    margin-left: 15px;
    width: 239px;
}

.woocommerce #editAddressDiv #billing_phone_field #billing_phone, .woocommerce #editAddressDiv #shipping_phone_field #shipping_phone {
    margin-left: 69px;
    width: 239px;
}

#editAddressDiv {
    background-color: #FFFFFF;
    padding: 10px;
    padding-left: 30px;
}

p.stars {
    overflow: hidden;
}

    p.stars span {
        background: url("images/ico-star.png") repeat-x scroll left 0 rgba(0, 0, 0, 0);
        float: left;
        height: 16px;
        position: relative;
        width: 80px;
    }

        p.stars span a {
            float: left;
            height: 0;
            left: 0;
            overflow: hidden;
            padding-top: 16px;
            position: absolute;
            top: 0;
            width: 16px;
        }

            p.stars span a.star-1 {
                width: 16px;
                z-index: 10;
            }

            p.stars span a.star-2 {
                width: 32px;
                z-index: 9;
            }

            p.stars span a.star-3 {
                width: 48px;
                z-index: 8;
            }

            p.stars span a.star-4 {
                width: 64px;
                z-index: 7;
            }

            p.stars span a.star-5 {
                width: 80px;
                z-index: 6;
            }

            p.stars span a.active {
                background: url("images/ico-star.png") repeat-x scroll left -32px rgba(0, 0, 0, 0);
            }

            p.stars span a:hover {
                background: url("images/ico-star.png") repeat-x scroll left -16px rgba(0, 0, 0, 0);
            }

.woocommerce-pagination ul.page-numbers {
    list-style: none outside none;
    overflow: hidden;
    padding: 20px 0;
    width: 100%;
}

    .woocommerce-pagination ul.page-numbers li {
        float: left;
        margin-left: 5px;
    }

        .woocommerce-pagination ul.page-numbers li span.current {
            font-weight: bold;
            border-color: #000000;
        }

        .woocommerce-pagination ul.page-numbers li span, .woocommerce-pagination ul.page-numbers li a {
            background-color: #FBCEE1;
            border: 1px solid #BFBFBF;
            float: left;
            margin: 2px;
            padding: 3px 5px;
            text-decoration: none;
        }
/*End*/

/*Common Elements*/
.clear {
    clear: both;
}
/*End*/

/*Contact Form*/
#cntctfrm_contact_form {
    color: #918889;
}

    #cntctfrm_contact_form input[type="submit"] {
        background-color: #191919;
        border-radius: 2px;
        color: #ffffff;
        cursor: pointer;
        display: inline-block;
        font-family: inherit;
        font-size: 11px;
        left: auto;
        line-height: 1em;
        margin-bottom: 5px;
        overflow: visible;
        padding: 6px 10px;
        position: relative;
        text-decoration: none;
        white-space: nowrap;
    }
/*End*/

I have successfully created this WordPress theme. You can also download this theme from here:

DOWNLOAD

Installing the Theme

After you download the theme which is in a .zip format, then extract the files inside the ‘themes’ folder of your WordPress.

Now go to ‘Appearance > Themes’ section of dashboard where you will find this theme, as shown in the image below:

theme section of wordpress dashboard

Next put your mouse over this new theme (yogi-herdesigns), and click the ‘Activate’ button. See below image:

activate wordpress theme

Your theme is now installed. If you are just starting with WordPress then see – How a Beginner can start using WordPress to manage his website? which will guide you with learning WordPress quickly.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "ASP.NET Core, jQuery, EF Core, SEO, jQuery, HTML" and more.