← Volver
Crear tema de WordPress
Publicado el 25 de abril de 2025
Wordpress
Empezaremos creando el archivo style.css el cual contendrá información sobre el tema.
/*
Theme Name: Blog Theme
Theme URI: http://www.ccorreas.es
Author: ccorreas
Author URI: http://www.ccorreas.es
Description: Theme for a basic blog
Version: 1.0.0
*/
Empezaremos con el fichero header.php el cual contendrá la cabecera
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo get_bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<nav class="nav__layout">
<p class="nav__logo">C</p>
<?php
wp_nav_menu(array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'menu_class' => 'nav__menu', // Añade esta clase al <ul>
));
?>
</nav>
<body>Seguidamente creamos el fichero footer.php
<footer class="footer__layout">
<p class="footer__text">ccorreas.es © 2025. All rights reserved</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Ahora pasamos al fichero índex.php el cual contendrá el contenido principal de la página
<?php get_header(); ?>
<main class="main__layout">
<div class="grid">
<div class="posts">
<?php
while (have_posts()) {
the_post();
?>
<?php the_content(); ?>
<?php
}
?>
</div>
<div class="aside">
<?php get_sidebar(); ?>
</div>
</div>
</main>
<?php get_footer(); ?>Para la página del artículo tenemos que crear el fichero single.php
<?php get_header(); ?>
<main class="main__layout">
<div class="">
<div class="posts">
<h1 class="post__title"><?php the_title(); ?></h1>
<div class="post__content">
<?php the_content(); ?></div>
</div>
</div>
</main>
<?php get_footer(); ?>El archivo sidebar.php
<div class="sidebar">
<h2 class="sidebar__title">Buscador</h2>
<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
<label for="search-input">
<span class="screen-reader-text"><?php _e('Buscar:'); ?></span>
</label>
<input type="search" id="search-input" class="search-field" placeholder="<?php echo esc_attr_x('Buscar...', 'placeholder', 'tu-tema'); ?>" value="<?php echo get_search_query(); ?>" name="s" />
<button type="submit" class="search-submit"><?php echo esc_html__('Buscar'); ?></button>
</form>
</div>
<div class="sidebar">
<h2 class="sidebar__title">Categorías</h2>
<div class="categorias">
<?php
// Obtener todas las categorías
$categories = get_categories();
// Recorrer y mostrar cada categoría
foreach ($categories as $category) {
echo '<a class="category__link" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a><br>';
}
?>
</div>
</div>El archivo home.php
<?php get_header(); ?>
<main class="main__layout">
<div class="grid">
<div class="posts">
<?php
while (have_posts()) {
the_post();
?>
<a class="card__link" href="<?php the_permalink(); ?>">
<div class="card">
<div class="card__img">
<?php the_post_thumbnail() ?>
</div>
<div class="card__info">
<h2 class="card__title">
<?php the_title(); ?>
</h2>
<p class="card__excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<p class="card__date"><?php echo get_the_date(); ?></p>
</div>
</div>
</a>
<?php
}
?>
</div>
<div class="aside">
<?php get_sidebar(); ?>
</div>
</div>
</main>
<?php get_footer(); ?>El archivo category.php
<?php get_header(); ?>
<main class="main__layout">
<div class="grid">
<div class="posts">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<a class="card__link" href="<?php the_permalink(); ?>">
<div class="card">
<div class="card__img">
<?php the_post_thumbnail() ?>
</div>
<div class="card__info">
<h2 class="card__title">
<?php the_title(); ?>
</h2>
<p class="card__excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<p class="card__date"><?php echo get_the_date(); ?></p>
</div>
</div>
</a>
<?php endwhile; ?>
<?php else : ?>
<p>No hay publicaciones en esta categoría.</p>
<?php endif; ?>
</div>
<div class="aside">
<?php get_sidebar(); ?>
</div>
</div>
</main>
<?php get_footer(); ?>El archivo seatch.php
<?php get_header(); ?>
<main class="main__layout">
<div class="grid">
<div class="posts">
<?php
while (have_posts()) {
the_post();
?>
<a class="card__link" href="<?php the_permalink(); ?>">
<div class="card">
<div class="card__img">
<?php the_post_thumbnail() ?>
</div>
<div class="card__info">
<h2 class="card__title">
<?php the_title(); ?>
</h2>
<p class="card__excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<p class="card__date"><?php echo get_the_date(); ?></p>
</div>
</div>
</a>
<?php
}
?>
</div>
<div class="aside">
<?php get_sidebar(); ?>
</div>
</div>
</main>
<?php get_footer(); ?>Para otorgar funciones a la página de WordPress es necesario crearlas en el fichero functions.php
<?php
function blog_theme_script()
{
wp_enqueue_style('style-css', get_template_directory_uri() . '/assets/css/styles.css');
}
add_action("wp_enqueue_scripts", "blog_theme_script");
function blog_theme_setup()
{
add_theme_support("post-thumbnails");
register_nav_menus(
array(
"menu-1" => esc_html__("Menú", "blog-theme"),
)
);
}
add_action("after_setup_theme", "blog_theme_setup");
function blog_custom_excerpt_length($length)
{
return 10;
}
add_filter('excerpt_length', 'blog_custom_excerpt_length');