MAKE WODPRESS THEME

Friday, 25 December 2015

MAKE WODPRESS THEME

------------------------------------------------------------------------------------------------------------------------
MAKE AND SAVE ALL FILE ONE BY ONE IN SAME FOLDER

------------------------------------------------------------------------------------------------------------------------
1) USE NOTEPAD ++
COPY AND PASTE BELOW CODE AND SAVE IN footer.php
------------------------------------------------------------------------------------------------------------------------
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
2) USE NOTEPAD ++
COPY AND PASTE BELOW CODE AND SAVE IN functions.php
------------------------------------------------------------------------------------------------------------------------
<?php
//Adds thumbnail to post
add_theme_support('post-thumbnails');
//Adds Menus
add_theme_support('menus');
//Register right sidebar
register_sidebar(array(
'name' => __( 'Right Hand Sidebar' ),
'id' => 'right-sidebar',
'description' => __( 'Widgets in this area will be shown on the right-hand side.' ),
'before_title' => '<h2>',
'after_title' => '</h2>',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>'
));
?>
-----------------------------------------------------------------------------------------------------------------------
3) USE NOTEPAD ++
COPY AND PASTE BELOW CODE AND SAVE IN header.php
-----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html">
<html>
<head>
<title><?php bloginfo('title'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</div>
</div>
</div>

------------------------------------------------------------------------------------------------------------------------
4) USE NOTEPAD ++
COPY AND PASTE BELOW CODE AND SAVE IN 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) USE NOTEPAD ++
COPY AND PASTE BELOW CODE AND SAVE IN sidebar.php
------------------------------------------------------------------------------------------------------------------------
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
------------------------------------------------------------------------------------------------------------------------
6) USE NOTEPAD ++
COPY AND PASTE BELOW CODE AND SAVE IN style.css
------------------------------------------------------------------------------------------------------------------------
/*
Theme Name:FbGadgets
Theme URI: http://fbgadgets.blogspot.co.uk/2015/12/make-wodpress-theme.html
*/

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;
}

------------------------------------------------------------------------------------------------------------------------
7) USE WINDOW PAINT OR LunaPic TO RESIZE YOUR IMAGE 800X600
AND SAVE THIS screenshot.png
------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------
8) USE WINRAR4.20 AND SEND COMPRESS ZIP FOLDER
http://www.oldversion.com/search?query=WINRAR

------------------------------------------------------------------------------------------------------------------------WORDPRESS SIDE BAR HTML OR PHP

====================================================================================

CODE: HTML BUT IT DOES NOT SHOW SEARCH BOX & IT'S LONGER THAN
PHP ONE LINE CODE

====================================================================================

<ul >

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

</ul>

<ul >

<?php wp_get_archives('type=monthly'); ?>

</ul>

</div>

====================================================================================

YOU CAN USE PHP CODE FOR COMPLETE: POST, HEADER, SIDEBAR ,FOOTER

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p><?php the_content(__('(more...)')); ?></p>
<?php endwhile; else: ?>
<?php endif; ?>

<?php get_header(); ?> '

<?php get_sidebar(); ?> '

<?php get_footer(); ?> '

================================================================================

MAKE THUMBNAIL I USE THIS CODE

index.php

<div id="posts">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="full-post" id="post-<?php the_ID(); ?>">

<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>

style.css

.full-post .aligncenter {

border:5px solid yellow;

width:200px;

height:200px;

}

================================================================================

OTHERS:

================================================================================

<h1><?php the_title(); ?></h1>

<h2 ><?php _e('Archives'); ?></h2>

<h2 ><?php _e('Categories'); ?></h2>

<h4>Posted on <?php the_time('F jS, Y') ?></h4>

====================================================================================

MAKE WODPRESS THEME WITH TWO FILES style.css And index.php

====================================================================================

style.css

===================================================================================

Theme Name:FbGadgets

Theme URI: http://fbgadgets.blogspot.co.uk/2015/12/make-wodpress-theme.html

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;

}

====================================================================================

index.php

====================================================================================

<?php wp_head(); ?>

<html>

<head>

<title>FbGadgets</title>

</head>

<body>

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h4>Posted on <?php the_time('F jS, Y') ?></h4>

<hr>

<?php endwhile; else: ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?> '

</div>

</div>

<h1>FOOTER</h1>

</div>

</body>

</html>

====================================================================================

index.php

OR USE THIS CODE WITH CUSTOMIZE SEARCH BOX

READMORE;https://wordpress.org/support/topic/how-to-customize-search-box-in-sidebar

http://fbgadgets.blogspot.co.uk/2016/01/simple-seach-box-without-java-code.html

How to customize search box in sidebar?

<div>

</div>

BUT BLOGGER TEMPLATE USE

http://fbgadgets.blogspot.co.uk/2016/01/simple-seach-box-without-java-code.html

YOU CAN'T CHANGE q WORD OR DO'T NOT USE UPPERCASE LETTER Q

</form>

====================================================================================

<?php wp_head(); ?>

<html>

<head>

<title>FbGadgets</title>

</head>

<body>

<h1><a href="http://localhost/test/">WORDPRESS</a></h1>

<div class="description">Just another WordPress site</div>

</div>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h4>Posted on <?php the_time('F jS, Y') ?></h4>

<hr>

<?php endwhile; else: ?>

<?php endif; ?>

</div>

<div id="sidebar">

<form id="searchform" method="get" action="http://localhost/test/">

<div>

<input name="s" id="s" size="15" type="text">

<input value="Search" type="submit">

</div>

</form>

<h2 ><?php _e('Categories'); ?></h2>

<ul >

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

</ul>

<h2 ><?php _e('Archives'); ?></h2>

<ul >

<?php wp_get_archives('type=monthly'); ?>

</ul>

</div>

</div>

</div>

<h1>FOOTER</h1>

</div>

</body>

</html>

FbGadgets

Friday, 25 December 2015