Showing posts with label Wordpress Theme. Show all posts
Showing posts with label 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