Tutorial: Tutorial para crear un theme de Wordpress desde cero

  • Autor Autor jakmm11
  • Fecha de inicio Fecha de inicio
J

jakmm11

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Comenzamos con este tutorial donde vamos a crear un theme para wordpress que vamos a poder utilizar como blog o como cualquier web, vamos a hacer este theme de wordpress desde cero y lo vamos a hacer que tenga las funciones básica que debe tener cualquier theme de wordpress.

Esto es lo que vamos a lograr:

web.webp

Bueno, antes de comenzar, miremos los archivos que tenemos que utilizar para crear este theme:

archivos.webp

Miremos como se crear cada archivo individualmente:

1 – Header.php
2 – index.php
3 – sidebar.php
4 – footer.php
5 – single.php
6 – comments.php
7 – functions.php
8 – style.css

Lo otro es la carpeta de imágenes donde solo tenemos el logo.

header.webp

Y el screenshot.png que es una imagen miniatura de representación de la web que puede ser de 300px * 225px que es la imagen que se nos mostrar en la administración del sitio en la opción de temas

rdrrrr.webp

Header.php

Este es el código para el header.php que contendrá las etiquetas que darán información a la web, asi como el enlace a los estilos css y los meta, también la apertura del body y el menú:

PHP: 
<!DOCTYPE html>  
  <html <?php language_attributes() ?>>
    <head>	
      <meta charset="<?php bloginfo('charset') ?>" />	
      <title><?php wp_title('-', true, 'right'); bloginfo() ?></title> 
      <!-- Stylesheets -->	
      <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> 
      <!-- RSS & Atom -->	
      <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name') ?> - RSS" href="<?php bloginfo('rss2_url') ?>" />	
      <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name') ?> - Atom" href="<?php bloginfo('atom_url') ?>" />
    </head>  
    <body>  
      <div id="wrapper">  
        <div class="header">  
          <div class="logo">
            <a href="<?php bloginfo('url') ?>">
              <img src="<?php bloginfo('template_url')?>/imagenes/header.jpg" alt="logo" />
            </a>
          </div>
        </div>
      	<nav>  
        <?php wp_nav_menu();  ?>
        </nav>

Explicación del código:

Abrimos el DOCTYPE, el nuevo de HTML5

PHP: 
 <html <?php language_attributes() ?>>

Abrimos la etiqueta html y añadimos la función de wordpress para definir el lenguaje

PHP: 
<meta charset="<?php bloginfo('charset') ?>" />

Definimos la codificación de la pagina es decir la codificación de los caracteres del documento web.

PHP: 
<title><?php wp_title('-', true, 'right'); bloginfo() ?></title>

Definimos el titulo de la pagina por medio de la función integrada de wordpress que lo hace dinámicamente desde el administrador en sus opciones de configuración.

PHP: 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Cargamos la hoja de los estilos css

PHP: 
<link rel="alternate" type="application/rss+xml"
   title="<?php bloginfo('name') ?> - RSS" href="<?php bloginfo('rss2_url') ?>" />
<link rel="alternate" type="application/atom+xml"
    title="<?php bloginfo('name') ?> - Atom" href="<?php bloginfo('atom_url') ?>" />

Habilitamos la opcion del feed para el blog por medio del rss, y la funcion de AtomPub

PHP: 
<div class="header">  
          <div class="logo">
            <a href="<?php bloginfo('url') ?>">
              <img src="<?php bloginfo('template_url')?>/imagenes/header.jpg" alt="logo" />
            </a>
          </div>
        </div>

Después de haber cerrado el head y abrir el body y abrir el id wrapper que será el contenedor general añadimos el header con sus respectivos elementos.

PHP: 
<nav>
   <?php wp_nav_menu();  ?>
</nav>

por ultimo acabamos el header.php añadiendo la barra de menu por medio de la funcion wp_nav_menu que nos muestra el menu principal del blog.

Y asi tenemos el Header.php Listo. !!


Index.Php

Este archivo es el que wordpress busca por defecto como index o pagina inicial, ahora esto lo podemos modificar y colocar cualquier pagina personalizada desde el panel de administración, pero el index será uno de los archivos más importantes de wordpress.

A continuacion veremos el codigo del index.php de nuestro theme y abajo te lo explico.

PHP: 
<?php get_header(); ?>

  <div id="contenido">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div id="entrada">
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <p class="postmetadata">           
                    Por <?php the_author(', '); ?> el <?php the_time('F jS, Y'); ?> en <?php the_category(', ') ?> | <?php comments_popup_link('Sin Comentario »', '1 Comentario »', '% Comentarios »'); ?>
            </p>
            <div class="imagen-post-thumbnail">
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
            </div>
			<div class="entry">
				<?php the_excerpt(); ?>
                <a href="<?php echo get_permalink(); ?>"><div class="mas">Leer mas...</div></a>
			</div>
		</div>

	<?php endwhile; ?>


	<?php else : ?>

		<h2>Not Found</h2>

	<?php endif; ?>
    </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

comencemos con la explicacion de codigo anterior, que generalmente lo que hace es llamadas a los demas archivo estructurales (header, footer y sidebar), y muestra los post establecidos.

PHP: 
<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Funcion de wordpress para llamar el archivo header.php y debajo de loop de wordpress llamamos al sidebar.php que es la barra lateral y el footer.php que es el pie de pagina.

Lo otro es el conocido y famoso loop de wordpress, vamos a ver como funciona este loop.

PHP: 
<div id="contenido">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div id="entrada">

Primero abrimos el div contenido que va a tener el contenido principal, luego se inicia el loop diciendo <?php if (have_posts()) : while (have_posts()) : the_post(); ?>, si hay post en la base de datos haz lo siguiente. Y luego abrimos un div entrada que contendrá la introducción del post o articulo.

PHP: 
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

Luego añadimos dinámicamente el titulo del post con la función the_permalink() dentro de un H2

PHP: 
<p class="postmetadata">           
                    Por <?php the_author(', '); ?> el <?php the_time('F jS, Y'); ?> en <?php the_category(', ') ?> | <?php comments_popup_link('Sin Comentario »', '1 Comentario »', '% Comentarios »'); ?>
</p>

En un párrafo con una clase para darle un estilo diferente encerramos los metadatos con las siguientes funciones <?php the_author(‘, ‘); ?> para mostrar dinámicamente el autor del post, <?php the_time(‘F jS, Y’); ?> para mostra la fecha en que fue escrito el post, <?php the_category(‘, ‘) ?> para mostrar la categoría a que pertenece el post y <?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?> para mostrar cuantos comentarios que se han hecho y cerramos el párrafo.

PHP: 
<div class="imagen-post-thumbnail">
     <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
 </div>

En medio de una clase para darle un estilo añadimos dinámicamente la opción para integrar un thumbnail al post es decir la imagen por defecto del post. Ahora, para añadir y dar funcionalidad a esto tenemos que declararlo en functions.php que lo veremos más adelante.

Ver el archivo adjunto 76711

PHP: 
<div class="entry">
<?php the_excerpt(); ?>
<a href="<?php echo get_permalink(); ?>"><div class="mas">Leer mas...</div></a>
</div>
</div>

Dentro de una clase añadimos la función <?php the_excerpt(); ¿> que lo que hacemos es mostrar el contenido del post igual que lo haría the <?php the_content(); ¿>, pero con la que utilizamos damos la opción de mostrar cierto número de letras como introducción al post, el numero de letras a mostrar lo hacemos en functions.php, luego mostramos el leer mas por medio de una función que lo hace dinámicamente, cerramos el div entry y el div que contiene el contenido del post.

PHP: 
 <?php endwhile; ?>
    <?php else : ?>
         <h2>Not Found</h2>
    <?php endif; ?>
 </div>

Cerramos él con <?php endwhile; ¿> y con <?php else : ¿> declaramos que si no se encuentra el post muestra el mensaje que está en el H2, o podemos personalizar una página de error, y luego cerramos el loop y el contenido.

Para saber más acerca el loop de wordpress te remito al codex donde esta toda la información necesaria. The Loop in Action « WordPress Codex

Sidebar.Php

El sidebar.php es la barra lateral de la web donde cargaremos los widget, mostrar los link de interés, categorías etc y lo hacemos dentro de la nueva etiqueta estructural de html5 aside.

PHP: 
<aside>
   <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>
        <div id="buscador">
           <?php get_search_form(); ?>
        </div>
     <h2>Facebook</h2>
        <ul>
           <?php wp_get_archives('type=monthly'); ?>
        </ul>
     <h2>Archivos</h2>
    	<ul>
    	   <?php wp_get_archives('type=monthly'); ?>
    	</ul>
        
     <h2>Categorias</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/">WordPress</a></li>
    	  <?php wp_meta(); ?>
    	</ul>
    	
    	<h2>Subscribirse</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; ?>
</aside>

Bueno a continuación te mostrare lo tratamos de decir con este código

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

Con esta función cargamos el sidebar en la web para mostrar su contenido y para añadir los widget desde la administración, pero para hacer esto tenemos que regístralo para que aparezca en el back de wordpress y para añadir widtget en el sidebar tendremos que registrarlo en functions.php, que lo veremos cuando hagamos este archivo.

PHP: 
PHP
<div id="buscador">
    <?php get_search_form(); ?>
 </div>

Dentro del id buscador para añadirle estilos, integramos el código <?php get_search_form(); ?> que nos genera el buscador de wordpress.

PHP: 
<h2>Archivos</h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>

Añadimos la función <?php wp_get_archives(‘type=monthly’); ?> dentro de una <ul> que nos genera los <li> con los archivos mensuales del sitio.

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

Añadimos una lista con la función <?php wp_list_categories(‘show_count=1&title_li=’); ?> con las categorías del sitio.

PHP: 
<?php wp_list_bookmarks(); ?>

con esta funcion mostramos todos los marcadores del sitio envueltos en <li>, envueltos en una <ul>. El título está en etiquetas H2.

PHP: 
<h2>Meta</h2>
    <ul>
      <?php wp_register(); ?>
        <li><?php wp_loginout(); ?></li>
        <li><a href="http://wordpress.org/">WordPress</a></li>
      <?php wp_meta(); ?>
   </ul>

Con un H2 mostramos el titulo Meta, y en una lista añadimos la función <?php wp_register(); ?> que nos hace ver la persona que está en la web acceda a sus privilegios de usuario, con <?php wp_loginout(); ?> lo que hacemos es dar la opción de desloguearnos de la web y por ultimo agregamos la función <?php wp_meta(); ?> que nos da la función de agregar contenido a la barra lateral.

PHP: 
<h2>Subscribirse</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; ?>
</aside>

Añadimos la opción de suscribirnos al feed y ver las entradas del RSS como elemento <li> por medio de una <ul>, luego cerramos la función php que abrimos al comienzo después de aside de apertura, y cerramos la barra lateral por medio de la etiqueta aside de cierre.

NOTA // Los elementos que añadimos en este sidebar los podemos omitir y agragarlos por medio de widgets en el administrador de WordPress.

Footer.Php

Con el footer.php lo que hacemos es cerrar el html general, que será llamado en el index.php o en cualquier pagina personalizada para siempre hacer el cierre del html.

PHP: 
 <footer>  
  © <?php echo Date(‘Y’) ?> theme tutorial by jakmm11   
 </footer>  
</div>  
</body>  
</html>

Bueno creo que acá no hay mucho que explicar, vemos que con <?php echo Date(‘Y’) ?> lo que hacemos es mostrar el año en que estamos dinámicamente dentro de la etiqueta footer, luego cerramos el div wrapper que abrimos al principio de todo el codigo, en el header, cerramos el body, y cerramos el Html.

Acá en el footer también podemos agregar opciones para añadir widget dinámicamente o también podemos agregar un menú o lo que queramos. en este caso solo vamos a poner el año y el autor.

Single.Php

Lo que hacemos con este archivo es mostrar cada post individualmente, cuando de clic para leer mas en el index.php me llevara a este archivo. Realmente esto es el mismo index.php, solo modificamos ciertas etiquetas para dar otras funciones.

PHP: 
<?php get_header(); ?>

 <div id="contenido">

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

		<div id="entrada">

			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                <p class="postmetadata">           
                    Por <?php the_author(', '); ?> el <?php the_time('F jS, Y'); ?> en <?php the_category(', ') ?> | <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
                </p>

			<div class="entry-single">
				<?php the_content(); ?>
			</div>
		</div>
        <?php comments_template(); ?>

	<?php endwhile; ?>

	<?php else : ?>

		<h2>pagina no encontrada</h2>

	<?php endif; ?>
    </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Bueno, como vemos bien es el mismo loop que te explique cuando creamos el index.php, a excepción de cómo vamos a mostrar el contenido, lo vamos a hacer con <?php the_content(); ?> en vez de <?php the_excerpt(); ?>, para que muestre todo el contenido completo del post, ya que no queremos mostrar un cierto numero de palabras, y también quitamos el thumbnail que nos muestra la imagen del post por defecto ya que si queremos mostrar acá una imagen lo vamos a hacer insertándola en el contenido. Y lo otro diferente es que agregamos <?php comments_template(); ?> que lo que hace es añadirnos a esta página single.php las opciones de comentarios para el post, esta página también la tendremos que crear.

Comments.Php

Lo que hacemos con este archivo es crear la funcion para hacer los comentarios del post o articulo, respoder mensaje etc..

// esto es la estructura basica que mas adelante podemos estilizar con css

comentario.webp

PHP: 
<?php

	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>
		This post is password protected. Enter the password to view comments.
	<?php
		return;
	}
?>

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

	<h2 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?></h2>

	<div class="navigation">
		<div class="next-posts"><?php previous_comments_link() ?></div>
		<div class="prev-posts"><?php next_comments_link() ?></div>
	</div>

	<ol class="commentlist">
		<?php wp_list_comments(); ?>
	</ol>

	<div class="navigation">
		<div class="next-posts"><?php previous_comments_link() ?></div>
		<div class="prev-posts"><?php next_comments_link() ?></div>
	</div>

 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<p>Comments are closed.</p>

	<?php endif; ?>

<?php endif; ?>

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

<div id="respond">

	<h2><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h2>

	<div class="cancel-comment-reply">
		<?php cancel_comment_reply_link(); ?>
	</div>

	<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
		<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
	<?php else : ?>

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

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

			<p>Logueado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Desloguearse »</a></p>

		<?php else : ?>

			<div>
				<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
				<label for="author">Nombre <?php if ($req) echo "(required)"; ?></label>
			</div>

			<div>
				<input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
				<label for="email">E-Mail (no sera publicado) <?php if ($req) echo "(required)"; ?></label>
			</div>

			<div>
				<input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
				<label for="url">Pagina Web</label>
			</div>

		<?php endif; ?>

		<!--<p>You can use these tags: <code><?php echo allowed_tags(); ?></code></p>-->

		<div>
			<textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea>
		</div>

		<div>
			<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
			<?php comment_id_fields(); ?>
		</div>

		<?php do_action('comment_form', $post->ID); ?>

	</form>

	<?php endif; // If registration required and not logged in ?>

</div>

<?php endif; ?>

Bueno este código es muy extenso, para una mayor referencia y una completa documentación te envío al codex de wordpress para saber más del comments.php Function Reference/comment form « WordPress Codex

Pero en resumen lo que hacemos aquí es añadir esta hoja a cada post individualmente, esta hoja contiene entre el mucho código, funciones, un formulario de envío etc..

Functions.Php

En este archivo tenemos el grupo de funciones que vamos a utilizar en nuestro theme para darle algún comportamiento especial, cualquier theme que sea un poco avanzado utiliza funciones. Veamos las funciones que utilizamos para este theme.

PHP: 
<?php

	// funcion para contar las letras de cada post en la introduccion en el index
	 function custom_excerpt_length( $length ) {
	  return 70;
       }
      add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

	// funcion para habilitar la opcion para subir imagenes destacadas a cada post
	  add_theme_support( 'post-thumbnails' ); 

	// esto nos añade las funciones para los RSS
	automatic_feed_links();

	// cargamos jQuery
	if ( !is_admin() ) {
	   wp_deregister_script('jquery');
	   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false);
	   wp_enqueue_script('jquery');
	}

	// Declaramos el sidebar como zona acta para añadir widgets
    if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name' => 'Sidebar Widgets',
    		'id'   => 'sidebar-widgets',
    		'description'   => 'These are widgets for the sidebar.',
    		'before_widget' => '<div id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</div>',
    		'before_title'  => '<h2>',
    		'after_title'   => '</h2>'
    	));
    }

?>

A continuación les voy a explicar en que consiste el codigo

PHP: 
function custom_excerpt_length( $length ) {
	  return 70;
       }
      add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

Como dice el comentario esta función es para contar las letras de cada post en la introducción en el index, es decir cada introducción de post va a tener 70 letras.

PHP: 
add_theme_support( 'post-thumbnails' );

Con esta función habilitamos la opción de subir imágenes de representación o destacadas de cada post

imgen desctacada.webp

PHP: 
if ( !is_admin() ) {
	   wp_deregister_script('jquery');
	   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false);
	   wp_enqueue_script('jquery');
	}

Con esta función vamos a incluir una copia de jquery en nuestro sitio con el fin de ahorrarnos ancho de banda y así ganar rapidez para la persona que visita la web, ya que lo que hacemos es una llamada a jquery que están en los servidores de google.

PHP: 
if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name' => 'Sidebar Widgets',
    		'id'   => 'sidebar-widgets',
    		'description'   => 'These are widgets for the sidebar.',
    		'before_widget' => '<div id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</div>',
    		'before_title'  => '<h2>',
    		'after_title'   => '</h2>'
    	));
    }

Declaramos el sidebar como zona acta para añadir widgets, es el archivo que tenemos como sidebar.php, con esta función vamos a poder subir widget a esa zona ya que se convertirá en algo mas dinámico, así podremos descargar plugins que funciona por medio de widget para darle más funcionalidad a el sitio web.

Podemos agregar muchas más funciones para extender las funcionalidades del theme.

Style.Css

Bueno este tutorial era para la creación de un theme para wordpress desde 0 y hice de cuenta que manejabas css por lo cual no explicare estilo por estilo, lo que se encuentra en este archivo style.css son los estilos necesarios para darle la apariencia a la plantilla, veamos el código

PHP: 
/*   
Theme Name: BetA Theme
Theme URI: http://forobeta.com/member.php?u=111542
Description: Tthema basado en foro beta
Author: Jakmm11
Author URI: fhttp://forobeta.com/member.php?u=111542
Version: 1
*/

body {  
    font-family: 'Droid Sans', Arial, Verdana, sans-serif;
    font-size: 14px;
    background-color: #eee;
}
a {
    color: #0E8FD0;
}
h1,h2,h3 {  
    color: #3399FF;  
    font-family:arial;  
}  
h1 {  
    font-size: 14pt ;  
}  
h2 {  
    font-size: 12pt ;  
}  
h3 {  
    font-size: 10pt ;  
}  
li {
	list-style-type:none;
}
#wrapper {
    background-color: #fff;
    border: 1px solid #dedede;  
    border-radius: 3px;  
    width:1000px;  
    margin: 0px auto 0px auto;  
}  
.header {
    background-color: #F87906;
    border-bottom: 1px #999 solid;  
	height: auto;
}
.logo {
    text-align: left;
    background: #F87906;
    border-radius: 3px 3px 0 0;
}

nav {
    margin: 0 0 10px 0;
    text-align: left;
    padding: 1px;
    background: #2d2d2d;
    border-bottom: 5px solid #0088CC;
}
nav li {
    border-right: 1px solid #565656;
    display: inline;
    padding: 10px
}
nav li a {
    color: #ccc;
    padding: 10px 20px;
    text-decoration: none;
}

nav li a:hover {
    background: #0088CC ;
    color: #ffffff;
}
#contenido {
    float: left;
    padding: 0 10px;
    width: 67%;
	margin: 0 0 15px 0;
}
#contenido h2 a {
    color: #DC700D;
    display: block;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}
#entrada {
    border-bottom: 1px solid #D4D4D4;
    overflow: hidden;
    padding: 10px 0 25px;
}
p.postmetadata {
    background: #f9f9f9;
    padding: 6px;
    border-left: 3px solid #0088CC;
	font-size: 13px;
    font-style: italic;
}
div.imagen-post-thumbnail {
    float: left;
    margin: 10px 10px 0 0;
}
a img.attachment-post-thumbnail {
    border: 2px solid #CCCCCC;
    height: 160px;
    width: 160px;
}
a:hover img.attachment-post-thumbnail {
    border: 2px solid #DE4912;
    opacity: 0.8;
}
div.entry {
    float: left;
    width: 495px;
    line-height: 20px;
}
div.mostrar-comentarios {
    margin: 15px 0;
}
.mas {
    background: #0A99E0;
    color: #fff;
    width: 120px;
    /* position: absolute; */
    text-align: center;
    padding: 5px 0;
    border-radius: 5px;
    float: right;
    margin-right: 20px;
}

aside {
    border-left: 1px solid #ccc;
    float: right;
    padding: 0 10px;
    width: 28.5%; 
	margin: 0 0 15px 0;
}

#buscador {
    background: #f4f4f4;
    padding: 10px 5px;
    border-radius: 10px;
}  
aside h2 {
    text-align: left;
    background: #f5f5f5;
    padding: 10px;
	border-radius: 10px;
}
aside ul li {
    text-align: left;
    list-style-type: circle;
    margin: 5px 0;
}
aside ul li a {
    text-decoration: none;
    color: #666;
}
aside ul li a:hover {
    color: #ccc;
    text-decoration: underline;
}
footer {  
    border-top: 1px #999 solid; 
	clear:both; 
	text-align: center;
	padding: 10px;
}

lo que no debemos omitir es esto:

PHP: 
/*   
Theme Name: BetA Theme
Theme URI: http://forobeta.com/member.php?u=111542
Description: Tthema basado en foro beta
Author: Jakmm11
Author URI: fhttp://forobeta.com/member.php?u=111542
Version: 1
*/

Que es como wordpress reconoce el theme, ya que le provee ciertas informaciones

Claro está a este theme podemos agregarle cosas y quitárselas, e igual adaptarla a vuestro gusto, aquí solo tenemos algunos estilos esenciales, lo demás será experimentar para darle mejor apariencia. Pero lo básico ya lo tenemos.

Bueno amigos espero que les haya servido... Gracias 🙂
 
Excelente tutorial :encouragement::encouragement::encouragement:
 
Muy bueno a favoritos.
 
muy buen tutorial, algo extenso pero vale la pena, será ponerlo en practica desde ahora, muchas gracias
 
Excelente 😛8:😛8:😛8:

Ahí tiene su like buen hombre :v
 
Wow un tutorial muy completo. Va mi like por el esfuerzo y espero que se lleve su premio :encouragement:
 
[MENTION=111542]jakmm11[/MENTION] Como podría hacerlo para hacer una web warez como de películas o juegos?
 
muy bueno también a favoritos :encouragement:
 
gracias, buen aporte.
 
Un tutorial muy extenso, pero bien explicado. Claro que se necesita tener cierto conocimientos en programación para poder hacer un theme al gusto y bien hecho, pero es buen tutorial.:encouragement:
 
Impresionante excelente tutorial +10 me cae como anillo al dedo 🙂

BartSosGroso10.gif

xD
 
bespokel dijo:
[MENTION=111542]jakmm11[/MENTION] Como podría hacerlo para hacer una web warez como de películas o juegos?
Hacer clic para expandir...

Dependiendo que tipo de plantilla. hay muchos modelos de themes warez. En tal caso solo harías modificaciones en el index.php para que muestre solo imagnes de las películas o juegos. también podrías agrupara por categoría. utilizando query_posts($query_string .'showposts=4&ignore_sticky_posts=1&category_name=nombrecategia'
 
Última edición:
Excelente, que gran aporte. :encouragement::encouragement::encouragement:
 
[MENTION=111542]jakmm11[/MENTION] Muy buen tutorial, gracias!! 😛8:
 
Gracias muy completo el tutorial.
 
Excelente tutorial!!
 
Muy útil. Gracias 🙂🙂
 
muy bueno, jjusto loq bussco
 
Gran tutorial, amigo. A favoritos para leerlo luego con calma, 1000 gracias :encouragement:
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

edivera
  • Cerrado
Se solicita Busco programador para hacer theme de WordPress desde cero
Respuestas
8
Visitas
494
Zarfala
Zarfala
S
  • Cerrado
Venta Seven SERP Theme: El primer theme para WordPress Sin Plugins
2
Respuestas
26
Visitas
2K
compuplas
compuplas
Macario
  • Cerrado
Se solicita Desarrollador web para crear y/o modificar theme de wordpress
Respuestas
3
Visitas
321
TvirtualClub
T
agonzlop
Theme de WordPress para listar posts fácilmente
Respuestas
2
Visitas
221
andrea diaz rojas
A
ramonjosegn
CYCLONE BLOG LITE - nuevo theme para WordPress de Cyclonethemes
Respuestas
0
Visitas
320
ramonjosegn
ramonjosegn
Atrás
Arriba