Después de bastante tiempo sin postear, llego en gloria y majestad con la tercera parte del tutorial “Creando una plantilla WordPress con 960 Grid System”. Bueno, empezaremos.

En la Parte I vimos:

1. Estructura Base de archivos de una Plantilla WordPress
2. Estrucutura Base XHTML de la plantilla
3. Aplicando el sistema de grillas 960 a la estructura XHTML
4. Estructura de archivos Base de Wordpress más los arhivos del framework 960

En la Parte II vimos.

1. Creación del archivo header.php
2. Creación del archivo index.php
3. Creación del archivo sidebar.php
4. Creación del archivo footer.php
5. Creación del archivo functions.php
6. Creación del archivo style.css

Ahora en la Parte III

Dividiremos la carga de index.php y dejaremos que solo en este se cargue el Home/Inicio

inde.php
|_  page.php : Para las Páginas
|_ single.php : Para las Entradas/Posts
|_ archive.php : Para todo lo que no es página ni post. Ej Categorías, Tags, etc.

y además creamos la plantilla de comentarios comments.php que se cargará desde single.php

Aquí vamos

page.php

Este archivo funcionará cuando queramos ver una página

<?php get_header(); ?>

<div id="content" class="clearfix">

<div class="grid_12 alpha" id="post">

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

<div id="post-content">

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

<div class="date">Escrito el <?php the_time('j \d\e F \d\e Y'); ?> a las <?php the_time() ?>, por <?php the_author() ?></div>

<?php the_content(__('Seguir leyendo'));?>

<small><?php edit_post_link('(Editar este contenido?)','',''); ?></small>

</div>

<?php endwhile; ?>

<?php endif; ?>

</div> <!-- Fin #post -->

<?php get_sidebar(); ?>

</div><!-- Fin #content -->

<?php get_footer(); ?>

En el caso que quieras crear una página más personalizada o para un caso particular, puedes ocupar este mismo código en adaptarlo a tus necesidades.

No olvides añadir a tu página personalizada, el tag “Template Name” en la parte superior del archivo para identificarla cuando queramos ocuparla de plantilla.

Ejemplo

/*
*  Template Name: Mi Pagina
*/

single.php

En este archivo se cargara una entrada/post cuando, además cargaremos la plantilla de comentarios desde comments.php

<?php get_header(); ?>

<div id="content" class="clearfix">

<div class="grid_12 alpha" id="post">

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

<div id="post-content">

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

<?php the_content(); ?>

<?php wp_link_pages(array('before' => '<p><strong>Pagina:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

<div id="postmeta">

<p><?php comments_popup_link('No hay comentarios', '1 Comentario', '% Comentarios'); ?> | Categoria: <?php the_category(', ') ?>   <small><?php edit_post_link('(Editar este contenido?)','',''); ?></small></p>

<p>Puede seguir los comentarios de esta entrada a traves de <?php comments_rss_link('RSS 2.0'); ?>.</p>

</div><!-- Fin #postmeta -->

</div>

<?php comments_template(); ?>

<?php endwhile; ?>

<?php endif; ?>

</div><!-- Fin #post -->

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

archive.php

En este archivo veremos el listados de nuestros posts de una catagoría, tag, fecha, etc.

<?php get_header(); ?>

<div id="content" class="clearfix">

<?php is_tag(); ?>

<?php if (have_posts()) : ?>

<div class="grid_12" id="post">

<?php $post = $posts[0]; ?>

<?php /* Categorias */ if (is_category()) { ?>

<h2>Archivo de la categor&iacute;a: &#8216;<?php single_cat_title(); ?>&#8217; </h2>

<?php /* Tags */ } elseif( is_tag() ) { ?>

<h2>Posts etiquetados con &#8216;<?php single_tag_title(); ?>&#8217;</h2>

<?php /* Archivo diario */ } elseif (is_day()) { ?>

<h2>Archivo de <?php the_time('j \d\e F \d\e Y'); ?></h2>

<?php /* Archivo mensual */ } elseif (is_month()) { ?>

<h2>Archivo de <?php the_time('F \d\e Y'); ?></h2>

<?php /* Archivo anual */ } elseif (is_year()) { ?>

<h2>Archivo de <?php the_time('Y'); ?></h2>

<?php /* Archivo de autor */ } elseif (is_author()) { ?>

<h2>Author Archive</h2>

<?php /* Arhivo paginado */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>

<h2>Archivos del blog</h2>

<?php } ?>

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

<div id="post-content">

<a class="post-title" href="<?php the_permalink() ?>" rel="bookmark"><h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2></a>

<div class="date"><?php the_time('l, j \d\e F \d\e Y') ?> <?php edit_post_link('(Editar esta entrada)', '', ''); ?></div>

<?php the_excerpt() ?>

<div id="postmeta">

<p><?php comments_popup_link('No hay comentarios', '1 Comentario', '% Comentario'); ?> | Categor&iacute;a: <?php the_category(', ') ?></p>

</div><!-- fin #postmeta -->

</div><!-- fin #post-content -->

<?php endwhile; ?>

<div id="postnavigation">

<p><?php next_posts_link('&laquo; Entradas Anteriores') ?>  <?php previous_posts_link('Entradas posteriores &raquo;') ?></p>

</div> <!-- fin #postnavigation -->

</div> <!-- fin #post -->

<?php endif; ?>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

comments.php

Este archivo será nuestra plantilla de comentarios, el cual tiene la particularidad de mostrar el avatar alojando en gravatar.com en caso de que tengamos una cuenta allí, la cual la reconoce mediante el correo electrónico.

<div id="comentarios">

<?php

if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>

<?php die('Tu no tienes acceso a esta pagina directamente'); ?>

<?php endif; ?>

<?php if(!empty($post->post_password)) : ?>

<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>

<p>Este contenido esta protegido con contraseña. Ingresa la contraseña para ver los comentarios.</p>

<?php endif; ?>

<?php endif; ?>

<?php if($comments) : ?>

<h2 id="num_comments"><?php comments_number(__('No hay comentarios'), __('1 Comentario'), __('% Comentarios')); ?></h2>

<ol class="comment-list">

<?php foreach($comments as $comment) : ?>

<li id="comment-<?php comment_ID(); ?>" >

<div class="grid_1">

<?php echo get_avatar(get_comment_author_email(), 48, $default_avatar ); ?>

</div>

<div class="grid_7 comentario">

<?php if ($comment->comment_approved == '0') : ?>

<p>Tu comentario esta a la espera de moderacion</p>

<?php endif; ?>

<?php comment_text(); ?>

<p class="meta">Comentado por <?php comment_author_link(); ?> el d&iacute;a <?php comment_date(); ?> a las <?php comment_time(); ?></p>

</div>

<div class="clear"></div>

</li>

<?php endforeach; ?>

</ol>

<?php else : ?>

<p>Todav&iacute;a no hay comentarios</p>

<?php endif; ?>

<h2 id="num_comments">Deja tu comentario</h2>

<?php if(comments_open()) : ?>

<?php if(get_option('comment_registration') && !$user_ID) : ?>

<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">Logueate </a> para comentar este post.</p><?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if($user_ID) : ?>

<p>Logueado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Salir &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />

<label for="author"><small>Nombre <?php if($req) echo "(requerido)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />

<label for="email"><small>Mail (no sera publicado) <?php if($req) echo "(requerido)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />

<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<p><textarea name="comment" id="comment" cols="80" rows="10" tabindex="4"></textarea></p>

<p><?php do_action('comment_form', $post->ID); ?></p><div class="clear"></div><br />

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Enviar Comentario" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>

</form>

<?php endif; ?>

<?php else : ?>

<p>Los comentarios estan cerrados.</p>

<?php endif; ?>

</div>

Esto es por ahora, trataré de ir documentando más el código para que se entienda mejor y en caso que tengan alguna duda, no olviden comentarla, saludos

Tema  de este mes ha sido, sin lugar a dudas, Google +. Si el nuevo servicio social de la empresa más grande del mundo de búsqueda seriá un “asesino de Facebook”, eso quedaría por ver, pero una cosa es cierta: Esta es una red social no quiere pasar por alto.

Cuando se trata de obtener resultados, Google + se está convirtiendo en un gran activo para los bloggers y los productores de contenidos gracias a su base de usuarios en constante expansión y herramientas sencillas para compartir. En este post, voy a mostrar algunas maneras de empezar a difundir un poco de ese amor + Google en su sitio web WordPress.

Mostrar la información de Google Perfil +

El desarrollador de software de John Henson PlusDevs ha desarrollado un práctico flash y fácil de usar, el cual WordPress muestra el perfil de + Google en su blog. La instalación es rápida y sencilla: instalar el plug-in y

arrastrar el widget en la barra lateral. Sólo tienes que rellenar el formulario y ya está.

También puedes incorporar el widget en tu plantilla con sólo unas pocas líneas de código PHP, que le da la flexibilidad para colocarlo en cualquier lugar dentro de su diseño.

Puedes aprender más sobre el widget en el blog oficial o saltar directamente al código en GitHub.

Google no oficial de seguimiento de usuario + SocialStatistics.com sitio también ofrece un integrable Google + flash. Basta con añadir su perfil de su base de datos y tomar el código del widget de la página en su sitio.

Agregar el botón +1

Si usted no está utilizando el botón de Google una, considere tomar un momento para añadirlo a su sitio. Esta es una gran manera para que los usuarios guardar, promover y encontrar sus contenidos favoritos. El botón de un sólo toma unos pocos minutos para la integración con su sitio y funciona con cualquier perfil de Google. Aunque esta característica no es Google + específicas, no sería en absoluto sorprendido de ver que integrado con el servicio. De cualquier manera, es otra gran manera de añadir una vía adicional para la promoción y el intercambio.

Usted puede aprender más sobre el botón +1 de Google.

Para agregar a tu sitio de WordPress, puedes usar el formulario generador de código de botones de Google o echar un vistazo a la gran cantidad botones de plug-ins WordPress disponibles.

Utilice un tema inspirado Google +

¿Te gusta el aspecto de Google+,  diseño limpio, interfaz intuitiva y discreta? bueno, tal vez usted tiene un blog que se centra en el servicio), ya que hay unos cuantos temas de WordPress inspirados en Google+  para su lectura.

WP Plus

WP Plus es una de ancho fijo, 3 columnas Google tema + inspred WordPress apoyo menús de contenidos, mensajes estilo pegajoso y el código XHTML / CSS. Limpio, rápido y de carga optimizada SEO, WP Plus ofrece un blog con apariencia Google+  en cuestión de minutos.

PlusOne

Al igual que en WP Plus, PlusOne es otro de 3 columnas, ancho fijo , el tema soporta menús personalizados de WordPress. Es un tema limpio y bien diseñado, pero toma algunas libertades con la forma en que se traduce Google + para WordPress (por lo que no se ve tan preciso como el diseño de Google).

Reflex +

Reflex + comparte todas las características mencionadas en los dos primeros temas, pero también aporta en jQuery y AJAX incorpora para algunas tareas, tales como el “leer más” mensaje de navegación, ayudando a que aparezca más fluido y sin problemas.

¿Quieres más?

Google + sigue siendo un servicio relativamente nuevo encerrado detrás de un sistema de registro sólo para invitados. Sin duda, a medida que avanza el tiempo y el servicio crece, habrá más opciones para los editores. En este momento hay un par de opciones si eres un desarrollador interesado en tener un ir en la creación de tu propio Google + Plug-in.

Si deseas acceder a la API oficial de Google+, tendrás que registrarte con Google para registrar su interés en una cuenta de desarrollador Google +. Por desgracia, la API no es todavía pública. No está claro si esto va a cambiar a medida que madure el servicio.

Para una mayor portabilidad (y, presumiblemente, recortada hacia abajo) en solución, el desarrollador de software Jason Striegel ha reunido una colección de utilidades de PHP para un local de hospedaje Google + API del servicio. En su estado actual, la API que le permite recuperar correos y datos de perfil y publicar en Google +. Usted puede consultar su código en GitHub. Esta es una gran opción para incluir dentro de su propio código distribuido, tales como WordPress plug-ins y widgets.

link: mashable

Clase

class BD{

private $conexion;

private $consulta;

private $host     = 'localhost';

private $usuario  ='usuario';

private $password = 'password';

private $basedato = 'basededatos';

function __construct(){

if(!isset($this->conexion)){

@$this->conexion  = OCILogon($this->usuario,$this->password,$this->basedato);

if(!$this->conexion){

echo 'El sistema NO se ha podido conectar con el servidor de la Base de Datos!';

exit();

}

}

}

function consulta($consulta){

$resultado = OCIParse($this->conexion,$consulta);

if(!$resultado){

echo 'Oracle Error';

exit;

}

OCIExecute($resultado,OCI_DEFAULT);

return $resultado;

}

function extraer($consulta){

global $row;

return OCIFetchInto($consulta, $row, OCI_ASSOC+OCI_RETURN_NULLS);

}

}

Implementacion

$con = new bd();

$sql = $con->consulta("SELECT * FROM productos");

$con->extraer($sql);

Ver clases para MySql y PostgreSql

PD: nótese el efecto que le da después a la guitarra acústica.

<div id="author">

<div id="avatar">

<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>

</div>

<div id="descripcion">

<p>Autor: <?php the_author_link(); ?></p>

<p><?php the_author_meta('description'); ?></p>

</div>

</div>

y los estilos son:

#author { background: #eaeaec; padding: 10px; margin: 0 0 15px 0;overflow: auto;}

#author .author{font-size:14px;}

#author #avatar { float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1; }

#author #descripcion h3{margin:0;}

Esta nueva versión corrige un bug de seguridad en la biblioteca KSES que fue catalogado de crítico ya que dejaba una vulnerabilidad XSS.

link: http://wordpress.org/news/2010/12/3-0-4-update/

link: wordpress.org/news/2010/11/wordpress-3-0-2/

Ganadores de otras categorías de proyectos Open Source

• CMS Open Source : CMS Made Simple
• Proyecto Open Source más prometedor: Pincore
• Aplicaciones E-Commerce Open Source: Prestashop
• Software Gráfrico Open Source: Blender
• Bibliotecas Javascripts Open Source: jQuery

Premios en dolares US para 1er, 2do y 3er lugar.

link: packtpub.com/open-source-awards-home/

Esta es la segunda parte del tutorial para crear una plantilla WordPress implementando el Framework 960, en el cual en esta etapa profundizaremos en la programación en cada archivo que compone la estructura de la plantilla.

En la Parte I vimos:

1. Estructura Base de archivos de una Plantilla WordPress
2. Estrucutura Base XHTML de la plantilla
3. Aplicando el sistema de grillas 960 a la estructura XHTML
4. Estructura de archivos Base de Wordpress más los arhivos del framework 960

Continuando con el desarrollo la Parte II tendrá lo siguientes tópicos.

1. Creación del archivo header.php
2. Creación del archivo index.php
3. Creación del archivo sidebar.php
4. Creación del archivo footer.php
5. Creación del archivo functions.php
6. Creación del archivo style.css

Comenzaremos como visualmente se vería el sitio, desde arriba hacia abajo en nuestro sitio, o sea, header, menu, posts, sidebar, footer y finalmente los estilos.

1. Creación del archivo header.php

Cabecera XHTML en el cual van las etiquetas <meta> como el author, keywords, description, etc.  más el titulo del sitio y de las páginas visitadas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

Declaramos los estilos necesarios de manera ordenada junto los archivos de Framework 960 G.S.

<!-- Estilos -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>>/css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />

<?php wp_head(); ?>	

</head>

En esta parte abrimos nuestro contenedor de contenido (#wrapper), el cual incluiera todos los bloques que darán forma al sitio, como el header, menu, sidebar, content, footer, pero en este caso solo incluiremos el header y el menu.

<body>
<div class="container_16" id="wrapper">

    <div class="grid_16" id="header">
        <h1><?php bloginfo('name'); ?></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </div>  <!-- Fin header -->

    <div class="clear"></div>

    <div class="grid_16 clearfix" id="menu">
        <ul class="menu">
            <li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
            <?php wp_list_pages('title_li='); ?>
        </ul>
    </div><!-- Fin menu -->

<div class="clear"></div>

Visualmente en esta parte solo irán los bloques de header y menu

2. Creación del archivo index.php

El  archivo index.php vendría siendo el mas importante, ya que une todas partes de la plantilla

<?php get_header(); ?>

<div id="content" class="clearfix">
    <div class="grid_12 alpha" id="post">
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="post-content">
            <a class="post-title" href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
            <div class="date">Escrito el <?php the_time('j \d\e F \d\e Y'); ?> a las <?php the_time() ?>, por <?php the_author(); ?> <small><?php edit_post_link('(Editar este contenido?)','',''); ?></small></div>
            <?php the_content(__('Seguir leyendo'));?>
            <div id="postmeta">
            	<p>Categoría: <?php the_category(', ');?></p>
            </div><!-- Fin #postmeta -->
        </div><!-- Fin #post-content -->
        <?php endwhile; else: ?>
        <p><strong>Ups! Aqui no hay nada.</strong></p>
        <?php endif; ?>
    </div> <!-- Fin #post -->
    <?php get_sidebar(); ?>
</div><!-- Fin #content -->

<?php get_footer(); ?>

Como vimos, tiene incluido el header, el loop de entradas, el sidebar y el footer.

3. Creación del archivo sidebar.php

Esta es la configuración de nuestro sidebar el cual se cargaran  las “entradas recientes” y “archivo” de manera automática hasta que se agregue algún widget en el panel de administración.

<div class="grid_4 omega" id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

    <h4>Entradas recientes</h4>
    <ul>
    	<?php get_archives('postbypost', 10); ?>
    </ul>
    <h4>Archivo</h4>
    <ul>
    	<?php wp_get_archives('type=monthly'); ?>
    </ul>

<?php endif; ?>
</div>

Se comprueba si en la zona widget creada existe algún widget sino se carga la configuración por defecto.

4. Creación del archivo footer.php

El footer es el ultimo bloque en el cual puede ir alguno tipo de información de sitio, contacto, etc. Terminamos cerrando el contenedor #wrapper

<div class="clear"></div>
<div id="footer">
	<div class="grid_16">
    	<p>Copyright © 2010 <?php bloginfo('name'); ?></p>
    </div>
    <div class="clear"></div>
</div><!-- Fin footer-->

</div><!-- Fin wrapper-->
<?php wp_footer(); ?>
</body>
</html>

Este un ejemplo simple de footer, pueden existir muchas variaciones a gusto e imaginación de los diseñadores.

5. Creación del archivo functions.php

En el archivo functions.php crearemos una zona widget para el sidebar.

<?php
if ( function_exists('register_sidebar') ):
	register_sidebar(array(
		'name' => 'Sidebar',
		'id'   => 'sidebar',
		'description'   => 'Sidebar Widget',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

endif;
?>

En sidebar.php se hace la llamada correspondiente a la zona widget tal como lo hemos hicimos anteriormente.

6. Creación del archivo style.css

Al fin hemos llegado a la parte artística, donde empesaremos a darle estilo a nuestra plantilla.

Empezaremos con la cabecera de archivo style.css, en el cual va información de la plantilla, como el nombre, descripción, nombre del autor, etc.

/*
Theme Name: Mi Theme WP
Theme URI: http://jcabezas.net
Description: Theme basico hecho con el framework 960 Grid System.
Version: 0.1
Author: Jose Cabezas Lucero
Author URI: http://jcabezas.net
*/

Nuestro contenedor y header

#wrapper{ background:#ffffff;}

/* Header */
#header{height:100px;}
#header h1{font-size:36px;color:#666666;font-family:Georgia, "Times New Roman", Times, serif;margin:0;}
#header p{font-style:italic;}

Estilo de la barra de menu

/* Menu */
#menu{text-align:center;height:50px;}
.menu, .menu * {margin:0;padding:0;list-style:none;}
.menu {line-height:14px;font-size:14px;float:left;margin-bottom:1em;width:100%;border-top:1px solid #fff;border-bottom:1px solid #ffffff;background:#666666;}
.menu a {display:block;position:relative;color:#ffffff;border-right:1px solid #ffffff;padding:10px 30px;text-decoration:none;}
.menu li:hover {visibility:inherit;background:#000000;}
.menu li {float:left;position:relative;background:#666666;}
.menu li:hover ul{left:-1px;top:2.5em; }
.menu ul {position:absolute;top:-999em;width:10em;}
.menu ul li {width:100%;}
.menu ul li a {border-left:1px solid #ffffff;}

Este bloque include a post y sidebar

/* Content */
#content{padding:10px 0;}
#content a{color:#999999;}
#content a:hover{color:#333333;}

/* Posts */
#post{background:#ffffff;text-align:justify;}
#post-content{margin-bottom:15px;padding:0 0 10px 10px;}
#post-content a.post-title{text-decoration:none;}
#post-content h2{background:#666666;color:#ffffff;margin:0 0 10px 0;}
#post-content h2:hover{background:#999999;}
#post-content .date{margin-bottom:10px;color:#666666;font-style:italic;}
#postmeta{color:#999999;}
#postnavigation{color:#999999;}

Estilos del sidebar o barra lateral

/* Sidebar */
#sidebar{ background:none;}
#sidebar h4{color:#ffffff;background:#666666;;margin:0;padding:3px;}
#sidebar ul li a{display:block;position:relative;color:#333333;}
#sidebar ul li{margin:0;padding:5px 10px;list-style:none;display:block;background: #dddddd;border-bottom:1px solid #ccc;border-top:1px solid #ffffff;}
#sidebar ul li:hover{background: #cccccc;}
#sidebar ul li a{display:block;color:#000;text-decoration:none;}
#sidebar ul li a:hover{color:#ffffff;}

Un simple retoque para nuestro footer.

/* Footer */
#footer{ background: #333333;text-align:center;color:#999999;}

Estos estilos están solo de manera monocromática, para no extender demasiando el tutorial y la hoja de estilos con imágenes y colores.

Conclusión

Hemos terminado la primera etapa de nuestra plantilla, con los archivos básicos pero que ya nos permite gestionar de manera fácil nuestro contenido.

Como resultado tenemos esta plantilla:

Descargar Código Fuente

En la parte III independizaremos la carga de paginas y post en sus archivos page.php y single respectivamente, también agregaremos el formulario de comentarios para nuestros post, un buscador y pagina de errores.

Ir a la parte 3

¿SI TE ENCUENTRAS TOMANDO PLANTILLAS ANTIGUAS y quieres agregar soporte para menús personalizados? Éstos son ejemplos de código que puede utilizar para eso.

Para ser claros, esto no es en toda regla general para menús personalizados. Ver un excelente post de Justin Tadlock, Goodbye, headaches. Hello, menus! o wp_nav_menu página del Codex para todos los detalles.

Primero, implementaremos lo siguiente en functions.php y header.php.

En header.php:

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

Este comando reemplaza la última navegación (generalmente) una lista de páginas el cual mueve a la función alternativa a functions.php.

En functions.php:

// habilita menu de navegacion

register_nav_menus( array(

'primary' => __( 'Primary Navigation', 'mytheme' )

) );

// agregar alternativa de navegacion

function mytheme_page_menu() { ?><ul class="menu">

<li<?php if ( is_home() ) echo ' class="selected"'; ?>><a href="<?php home_url(); ?>">Home</a></li>

<?php wp_list_pages( 'depth=1&title_li=' ); ?>

</ul>

<?php } ?>

No se olvide de cambiar “mytheme” en los ejemplos anteriores al nombre de su plantilla.

A continuación, añada las reglas CSS para elementos de submenú.

#nav li { 	position: relative; }

#nav li a { 	display: block; }

#nav .children .children, #nav .sub-menu .sub-menu { 	margin-left: 12px; }

#nav ul ul { 	display: none; 	float: left; 	position: absolute; 	top: 32px; 	left: 0; 	width: 85px; 	z-index: 9999; }

#nav ul ul li { 	min-width: 105px; }

#nav ul ul a { 	width: 105px; }

#nav ul li:hover > ul { 	display: block; }

/* tus estilos van aqui */

#nav ul li a:hover, #nav ul li:hover > a, #nav ul li.current_page_item > a, #nav ul li.current_page_parent > a, #nav ul li.current_page_ancestor > a, #nav ul li.current-cat > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent a { 	/* background, color, etc */ }

A continuación, prueba tu nuevo menú. Prueba sin menú personalizado (navegación normal de la página), con un menú personalizado habilitado, y probar los menús desplegables mediante la adición de elementos de submenú.

Por último, agregar la etiqueta custom-menu a tu archivo style.css para contar al mundo con orgullo  que sabe dar soporte un menú personalizado en tu plantilla.

Traducción de themeshaper.com/custom-menu-code-samples/