WP Theme maken ? binnen een half uur ?

Zelf een WordPress theme maken !

Hier onder laat ik zien hoe je in een half uurtje een wordpress theme kunt maken , het theme heeft ook een Widget functie en menu functie. Je kan de theme niet downloaden maar je zal even alles moeten knippen en plakken en de bestanden juist op moeten slaan. Je kan het Theme uiteraard later helemaal gaan uitbreiden en naar eigen smaak inrichten.Het css bestandje heeft ook eigenlijk alleen wat benodigde onderdelen.

We gaan beginnen:

(1) Maak op je pc eerst een map aan ( bv MijnTheme )

(2) Ga daar de volgende bestanden in zetten :

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title>Je eigen WP Theme</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<?php wp_enqueue_script("jquery"); ?>
 
         <?php wp_head(); ?>
</head>

<body>

  <div id="wrap">
     <div id="header">
			<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
			<h3><?php bloginfo('description'); ?></h3>

     <div id="menu_wrapper">
       <div id="menu">

        <?php wp_nav_menu(array('theme_location' => 'primary', 'container' => '')); ?>

       </div>
     </div>
   </div>

index.php

<?php get_header(); ?>

<?php get_sidebar(); ?>

<div id="content">

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

			<div id="content">
                         
                             <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

            
				<?php the_content(); ?>
			</div>

				<?php the_tags('Tags: ', ', ', '<br />'); ?>
				Gepost in <?php the_category(', ') ?> |
				<?php comments_popup_link('Geen Reacties &#187;', '1 Reactie &#187;', '% Reacties &#187;'); ?>
        </div>

	<?php endwhile; ?>

	<?php else : ?>
            <div id="content">
		<h2>Niet gevonden</h2>
             </div>

	<?php endif; ?>
</div>

<?php get_footer(); ?>

page.php

<?php get_header(); ?>

<?php get_sidebar(); ?>

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

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

               <div id="content">

				<?php the_content(); ?>

               </div>

	<?php endwhile; endif; ?>

<?php get_footer(); ?>

single.php

<?php get_header(); ?>

<?php get_sidebar(); ?>

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

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

               <div id="content">

				<?php the_content(); ?>

               </div>

	<?php comments_template(); ?>

	<?php endwhile; endif; ?>

<?php get_footer(); ?>

sidebar.php

<div id="widgetright">

    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>

    	<?php get_search_form(); ?>

    	<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

    	<h2>Archives</h2>
    	<ul>
    		<?php wp_get_archives('type=monthly'); ?>
    	</ul>

        <h2>Categories</h2>
        <ul>
    	   <?php wp_list_categories('show_count=1&title_li='); ?>
        </ul>

    	<?php wp_list_bookmarks(); ?>

    	<h2>Meta</h2>
    	<ul>
    		<?php wp_register(); ?>
    		<li><?php wp_loginout(); ?></li>
    		<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    		<?php wp_meta(); ?>
    	</ul>

    	<h2>Subscribe</h2>
    	<ul>
    		<li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li>
    		<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li>
    	</ul>

	<?php endif; ?>

</div>

footer.php


 <div id="footer">
     &copy;<?php echo date("Y"); echo " "; bloginfo('name'); ?>
 </div>
</div>

	<?php wp_footer(); ?>

</body>

</html>

functions.php

<?php

	// Menu
        add_action( 'init', 'register_my_menu' );
        function register_my_menu() { register_nav_menu( 'primary-menu', __( 'Primary Navigation' ) ); };

	// Widgets

    if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name' => 'Zijkant Widgets',
    		'id'   => 'sidebar-widgets',
    		'description'   => 'Widgets voor zijkant.',
    		'before_widget' => '<div>',
    		'after_widget'  => '</div>',
    		'before_title'  => '<h2>',
    		'after_title'   => '</h2>'
    	));
    }

?>

En als laatste de css , dit is de opmaak van je pagina (en heel belangrijk) zorgt ervoor dat wordpress je theme herkent
style.css

/*
Theme Name: Blank Thema
Description: Blank Thema voor wordpress
Author: Robert van Roosmalen
Author URI: http://robertvanroosmalen.nl
Version: 1
*/

body {background:#e1e1e1; margin:0 auto; padding:0;}
#wrap {background:#fff; width:900px; margin:0 auto; padding:1px 5px;}
#header {border-bottom:1px solid #e1e1e1; height:125px;}
#widgetright {clear:right; float:right; margin:px 0 5px; padding:7px; width:200px; border-left:1px solid #e1e1e1;}
#content {margin:5px 0px 10px 10px; padding:0; text-align:left;}
#footer {background:#fff; border-top:1px solid #e1e1e1; clear:both; text-align:center; width:900px;}
#menu_wrapper {
	clear: both;
	width: 100%;
	margin: 0 auto;
	background:#e1e1e1
}
#menu {
    width: 870px;
	height: 25px;
	margin: 0 auto;
}

#menu ul {
	float: left;
	margin: 0px;
	padding: 0 0 0 20px;
	list-style: none;
}

#menu ul li {
	margin: 0px;
	padding: 0px;
	display: inline;
}

#menu ul li a {
	position: relative;
	float: left;
	display: inline-block;
	height: 25px;
	width: 130px;
	margin-right: 5px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	outline: none;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

(3) Nu je dit allemaal in de map hebt geplaatst ga je heel deze map uploaden naar je ../wp-content/themes

Als je nu via je dashbord bij je themes gaat kijken zul je zien dat jouw gemaakte Theme erbij staat.

Succes ermee !!

Reacties gesloten.