Para crear un tema de wordpress desde cero seguiremos el siguiente ejemplo. La estructura que veremos será como la que aparece en la siguiente imagen.
Para ello crearemos dentro de la carpeta wp-content/themes una carpeta que llevará el nombre de nuestro theme. En ella crearemos los siguientes archivos base:
header.php
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
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(); ?>
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>
footer.php
<div id="footer"> <h1>FOOTER</h1> </div> </div> </body> </html>
style.css
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; }
Tambien podemos añadir un archivo png con el nombre screenshot.png que será el que se visualizará en la pantalla de themes disponibles.
El resultado de lo que hemos hecho hasta ahora es el siguiente:
Para añadirle por ejemplo la funcionalidad de crear un menú personalizado deberemos añadir estos archivos.
A partir de aquí podemos realizar todas las modificaciones necesarias para adaptarlo a nuestras necesidades. Podemos echar un vistazo a todas las funciones de las que disponemos en el siguiente link: http://codex.wordpress.org/Function_Reference
