Showing posts with label How To Create Wordpress Theme. Show all posts
Showing posts with label How To Create Wordpress Theme. Show all posts

Monday, 20 July 2015

How To Create Wordpress Theme

Hello

Here I want Create Example of Wordpress theme.

You want to create your own wordpress theme then you can know create basic file.

1)header.php
2)footer.php
3)style.css //Most Impotant
4)index.php
5)sidebar.php //optional
6)functions.php // optional

this 6 file needed for custom theme in Wordpress

 I am Create Wordpress Theme My Own I give Example for that you can change and
and create your own.

1) header.php

<html>
<head>
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<a id="logo"href="<?php echo site_url(); ?>"><h1><?php bloginfo('name'); ?></h1></a>

<img id="header_image" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
</div>
<nav>

  <?php wp_nav_menu(); ?>

</nav>

2)footer.php

<div id="footer">
<h1>FOOTER</h1>
<?php if (  dynamic_sidebar( 'widgetized-area' ) ) : ?>
<?php endif; ?>
</div>
</div>
</body>
</html>

3)sidebar.php

<div id="sidebar">
<?php if (  dynamic_sidebar( 'footer-id' ) ) : ?>
<?php endif; ?>
</div>

4) index.php

<?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; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

5)functions.php

<?php
$args = array(
'width'         => 980,
'height'        => 198,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );


function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Widgetized Area',
'id'   => 'widgetized-area',
'description'   => 'This is a widgetized area.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget'  => '</div>',
'before_title'  => '<h4>',
'after_title'   => '</h4>'
));
   
    register_sidebar(array(
'name' => 'Footer',
'id'   => 'footer-id',
'description'   => 'This is a widgetized area for Footer.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget'  => '</div>',
'before_title'  => '<h4>',
'after_title'   => '</h4>'
));

}
?>


6)style.css

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; width:1196px; height:296px;}
#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;width:1196px; height:296px; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
#logo{
    float: left;
    position: absolute;
    color: #fff;
}
#header_image{
    width:100%;
    height:100%;
}
.menu-menu-1-container li {
    display: inline-block;
    margin: 10px;
}
.widget_nav_menu li{
    display: block;
}
.widget_categories li{
    list-style: none;
}
#footer .widget_nav_menu{
    float: left;
}
#footer .widget_categories{
    float: none;
}

In functions.php file I create code for Add Menu:- register_my_menu FUNCTION
CREATE WIGET ARE FOR SIDEBAR AND FOOTER ->register_sidebar FUNCTION
AND ADD NEW HEADER FOR add_theme_support ADDED IN FUNCTIONS.PHP

SIDEBAR I AM ADDED FOOTER WIDGET IN WIDGET AREA.
FOOTER I AM ADDED Widgetized Area SIDEBAR