HTML to WordPress
How separate php header, footer and sidebar from index
Today topics is separate php file like header as header.php footer as footer.php and sidebar as sidebar.php from index.php . You may saw that every website has same structure in every pages or template for header, footer and sidebar(sidebar can be right or left side).
Header.php
Header.php is that which contain header markup. A website every page or template contain common style in header that common style taken in header.php . Header.php contain markup from end of header section to before all markup. An example given below from our previous index.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bar/bar.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/dark/dark.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/default/default.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/light/light.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/nivo-slider.css"/>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/fonts/stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/comments.css"/>
<?php wp_head(); ?>
</head>
<body>
<div class="fix main">
<div class="fix header">
<a href="<?php bloginfo('home'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt=""/></a>
</div>
<div class="fix mainmenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Servece</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About us</a></li>
</ul>
</div>
Cut it from index.php given <?php get_header();?> and save it as header.php
Footer.php
Footer.php also like as header.php only it is in bottom portion of website. Footer.php contain that markup which show in every pages and templates. From start footer section to below all markup goes in footer.php .
An example given below from our previous index.php
<div class="fix footer">
<p>© RR Foundation, All Rights Reserved</p>
</div>
</div>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<?php wp_footer(); ?>
</body>
</html>
Select from footer section start below all copy and cut save as footer.php than given there <?php get_fooer();?> index.php where from you cut this code.
Sidebar.php
Sidebar.php easy then header and footer php . In sidebar.php contain only sidebar section markup.
<div class="line number36 index35 alt1"><code class="plain plain"><div class="fix sidebar"></code></div> <div class="line number37 index36 alt2"><code class="plain plain"><ul></code></div> <div class="line number38 index37 alt1"><code class="plain plain"><li><a href="">Home</a></li></code></div> <div class="line number39 index38 alt2"><code class="plain plain"><li><a href="">About</a></li></code></div> <div class="line number40 index39 alt1"><code class="plain plain"><li><a href="">Contact</a></li></code></div> <div class="line number41 index40 alt2"><code class="plain plain"><li><a href="">Others</a></li></code></div> <div class="line number42 index41 alt1"><code class="plain plain"><li><a href="">Media</a></li></code></div> <div class="line number43 index42 alt2"><code class="plain plain"></ul></code></div> <div class="line number44 index43 alt1"><code class="plain plain"></div></code></div>
Select sidebar div start to end div copy and cut save as sidebar.php and given <?php get_sidebar();?>.
If you compare with previous index.php you can easily understand this tune.
Comments are closed
