1. Lo mínimo necesario
  2. Rompemos la plantilla
  3. wp_head y wp_footer
  4. Cambiar una imagen en nuestra plantilla
  5. Botonera Principal
  6. Añadimos la sección de contenido
  7. Ficheros básicos en una plantilla con WordPress:
  8. Añadir Hooks
  9. Añadir Widgets
  10. Crear un menú modificando su HTML
  11. Añadir rel="nofollow" a todos los enlaces
  12. Crear child pages
  13. Crear child themes
  14. jQuery no está funcionando en Wordpress
  15. Assets
  16. Evaluar la página en la que estamos
  17. Shortcodes
    1. Añadir la posibilidad de usar shortcodes en wordpress sin widgets
    2. Ejecutar un shortcode desde el código fuente de la plantilla
  18. Añadir filtros a los resultados de búsqueda del search box
    1. Excluír categorías
    2. Mostrar sólo los custom post type indicados
  19. Exluir/Incluir categorías del blog
  20. Recuperar el id de la página en la que estoy

Lo mínimo necesario

index.php<!DOCTYPE html>
<html> <head> <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>"> </head> <body> <section> <header id="header"></header> <section id="content"></section> <footer id="footer"></footer> </section> </body> </html>
style.css/*
    Theme Name: Monteserín Template
    Theme URI: URL del theme
    Author: Pablo Monteserín
    Author URI: pablomonteserin.com
    Version: 1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: blue, one-column
*/
footer#footer{
    width:100%;
    height: 90px;
    background: blue
}
header#header{
    width:100%;
    height: 90px;
    background: salmon;
}
section#content{
    margin:auto;
    width:1000px;
    min-height: 500px;
    background: pink;
}

En la cabecera del fichero es donde tendremos los datos de nuestro theme que aparecerán en el menú administrador.
Estas deben ser las primeras líneas del fichero ya que sin ellas el theme no será valido y por lo tanto descartado por Wordpress.

Ya está hecha la plantilla

Rompemos la plantilla

Separamos del header para arriba y del footer para bajo en header.php y footer.php y los reinsertamos en la plantilla usando get_header(); y get_footer();

Para incluir partes de la plantilla tenemos:

  • get_header();
  • get_footer();
  • get_sidebar();
  • get_template_part('partePersonalizadaSinPuntophp');

<!DOCTYPE html>
<html> <head> <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>"> </head> <body> <section> <header id="header"></header> --------------------------------------------------------------------------------- <section id="content"></section> --------------------------------------------------------------------------------- <footer id="footer"></footer> </section> </body> </html>
/* wp_head se pone justo antes del cierre de la etiqueta </head> y            
* wp_footer se pone justo antes del cierre de la etiqueta </body>
*/ 
<?php wp_head(); ?>
</head>

…

<?php wp_footer(); ?>
</body>
</html>
        
    

Cambiar una imagen en nuestra plantilla

Para obtener dinámicamente la ruta a la plantilla podemos usar:

<?php echo get_stylesheet_directory_uri()?>

Por tanto, para cargar una fotografía usaremos:

<img class="logo" src="<?php echo get_stylesheet_directory_uri()?>/elefante.jpg" alt="">          

Pondremos este código dónde querramos que se vea la botonera principal:

plantilla.php
<?php 
$defaults = array(
    'header' => 'Header menu',
        'theme_location'  => 'aqui lo pongo',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => '',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
        'depth'           => 0,
        'walker'          => ''
);

wp_nav_menu( $defaults );

?>
    
functions.php
<?php 
    register_nav_menus( array(
        'aqui lo pongo'   => __( 'El menú de arriba' ),
        'secondary' => __( 'Secondary menu in left sidebar'),
    ) );
?>        
    

Añadimos la sección de contenido

En index.php:get_header();
while ( have_posts() ) : the_post();
    get_template_part( 'content', get_post_format() ); 
endwhile;
get_footer();
content.php$query = get_post(get_the_ID()); 
$content = apply_filters('the_content', $query->post_content);
echo $content;

Ficheros básicos en una plantilla con WordPress:

  • style.css – Hoja de estilos principal del theme
  • index.php – Página principal del theme
  • screenshot.png → Es la foto del previo de wordpress que aparece en el panel de administración de wordpress. El tamaño correcto de esta fotografía es de 880 x 660 pixels.
  • comments.php – Template para los comentarios (sino existe se coge el de por defecto de Wordpress)
  • comments-popup.php – Template para los comentarios vía pop-up (sino existe se coge el de por defecto de Wordpress)
  • single.php – Template usado para mostrar una entrada en concreto, también se puede montar de tal forma que se base en el index.php.
  • page.php – Template usado para las páginas generadas.
  • category.php – Template usado para mostrar las categorías
  • author.php – Template que usa cuando queremos mostrar información del autor.
  • date.php – Template usado para cuando buscamos por fechas
  • archive.php – Template que nos muestras las entradas filtradas por Archives, este archivo puede sustituir a los 4 anteriores.
  • search.php – Template que usamos para las búsquedas.
  • 404.php – Template que implementamos para cuando no encuentra una página dentro de nuestro dominio.

Añadir hooks

header.php (por ejemplo)do_action('despues_body');
functions.phpadd_action('despues_body', function(){
        ...
}, 100);

Añadir Widgets

Al añadir el siguiente código se añadirán dos paneles de Widgets dentro del panel de administración de Wordpress.

functions.php
if (function_exists('register_sidebar')) {
    register_sidebar(array(
            'name' => 'Footer Left',
            'id'   => 'top-widgets',
            'description'   => 'Widget Area',
            'before_widget' => '<div class="two">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
    ));     
    register_sidebar(array(
            'name' => 'Sidebar Widgets',
            'id'   => 'sidebar-widgets',
            'description'   => 'Widget Area',
            'before_widget' => '<div class="one">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
     ));
    }
footer.php (o dónde sea)
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
<?php endif; ?>

Evaluar si estoy en cierta página

Este código afectará a una página y todas sus paginaciones

add_action( 'wp_head', function(){
    if( is_page( array( 'coreografias' ) )){
        //Aquí es posible meter métodos add_action y remove_action
    }
} );

Añadir rel="nofollow" a todos los enlaces

Añadiremos el siguiente código al functions.php:

    
function crunchify_nofollow_cat($text) {
    global $post;
    $text = stripslashes(wp_rel_nofollow($text));
    return $text;
}
add_filter('the_content', 'crunchify_nofollow_cat');
    

Crear child pages

Crearemos un fichero loQueSea.php que como mínimo debe tener entre sus comentarios iniciales, inmediatamente al comienzo del documento, la primera línea en rojo de las que se muestran a continuación:

<?php
/* 
Template Name: Homepage 
Description: Cool child theme based on Monteserin
Author: Pablo Monteserin
Version: 1.0
Template: monteserin
*/
?>

Si el nombre del template es page-{sulg}.php, no hará falta asignarlo a una página o post para que funcione.

Crear child themes

wp-content/themes/tempera-child/style.css/*
Theme Name: tempera-child
Theme URI: http://semanticae.es
Version: 4.0
Description: Tema hijo de tempera para hacer cambios sin riesgo
Template: tempera

*/
@import url("../tempera/style.css");

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

#content tr th, #content thead th {
    font-size: 14px;
    padding: 5px 2px;
}

.textwidget h3 {
        margin:0px;
}
#site-title  {
        margin-left: 60px;
}

jQuery no está funcionando en Wordpress

Si este código no funciona:$(document).ready(function(){
    alert('test');
});
Podemos usar este en su lugar:(function($) {
    $(function(){

    })
})(jQuery);

Assets

add_action('wp_enqueue_scripts', 'prefix_add_my_stylesheet', 999);

function prefix_add_my_stylesheet(){
    wp_register_style( 'competencias', get_stylesheet_directory_uri()."/css/competencias.css");
    wp_enqueue_style( 'competencias');
}

add_action( 'wp_enqueue_scripts', function(){
        wp_enqueue_script('tabby', plugins_url('js/tabby.js', __FILE__), array('jquery'), "1.0.0", true);

});

Evaluar la página en la que estamos

Evaluar si es una entrada del blogis_singular('post')
Evaluar si es el blogis_home()

Shortcodes

Añadir la posibilidad de usar shortcodes en widgets sin plugin

add_filter('widget_text', 'do_shortcode');

Ejecutar un shortcode desde el código fuente de la plantilla

echo do_shortcode('[wcm_restrict plan="plata"]contenido restringido[/wcm_restrict]');

Crear un menú modificando su HTML

class Walker_Custom_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        //Creamos un método has_children  que estará disponible para las siguientes funciones y devolverá true cuando un nodo tenga hijos
        $id_field = $this->db_fields['id'];
        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
        }
        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
    function start_lvl(&$output, $depth=0, $args=array()) {
        $class="";
        if ( $args->has_children ) {
            $class ='class="dl-submenu"';
        }
        $output .= "\n<ul ".$class.">\n";
    }
    function end_lvl(&$output, $depth=0, $args=array()) {
        $output .= "</ul>\n";
    }
    function start_el(&$output, $item, $depth, $args) {
        $class = "";
        if ( $args->has_children ) {
            $class ="submenu";
        }
        $output.= '<li><a href="' . esc_attr( $item->url ) .'">'.esc_attr($item->title)."</a>";
    }
    function end_el(&$output, $item, $depth=0, $args=array()) {
        $output .= "</li>\n";
    }
}

Para usar el menú anterior (directamente, sin registrarlo)

<?php
    wp_nav_menu(array(
        'menu'    => 1, //menu id
        'walker'  => new Walker_Custom_Menu(), //use our custom walker
        'container' => false, //evita la creación de una capa container
        'menu_class' => 'dl-menu', //el class del ul que lo engloba todo
        'items_wrap'        => '<ul id="dl-menu" class="dl-menu">%3$s</ul>', //definimos como será el ul que envuelve a nuestra botonera
    ));
?>

Recuperar el id de la página en la que estoy

global $post;
echo $post->ID;

$pagename = get_query_var('pagename');
echo $pagename;

Añadir filtros a los resultados de búsqueda del search box

Excluír categorías

function exclude_category($query) {
    if ( $query->is_home ) {
        $query->set( 'tax_query', array(
            'relation' => 'OR',
            array(
                'post_type' =>'proyectos',
                'taxonomy' => 'category',
                'field' =>  'ID',
                'terms' => 3
            ),
            array(
                'taxonomy' => 'post_tag',
                'field' => 'slug',
                'terms' => 'urgent'
            )
        ));
    }
    return $query;
}
add_filter('pre_get_posts', 'exclude_category');

Mostrar sólo los custom post type indicados

function searchfilter($query) {
 
    if ($query->is_search && !is_admin() ) {
        $query->set('post_type',array('post','page', 'product'));
    }
    return $query;
}
 
add_filter('pre_get_posts','searchfilter');

Exluir/Incluir categorías del blog

add_action( 'pre_get_posts', 'bg_exclude_categories' );
function bg_exclude_categories( $query ) {
    if( $query->is_main_query() &&am; $query->is_home() ) {
        //$query->set( 'cat', array( -27, -30 ) );
        $query->set( 'category__not_in', array( 120) );  }
    $query->set( 'category__not_in', array( 120) );  }
}

Custom Post Type (CPT)

Crear Custom Post Type

function create_posttype() {
    register_post_type( 'proyectos',
        array(
            'supports' => array( 'thumbnail','title','editor' ),
            'labels' => array(
                'name' => __( 'proyectos' ),
                'singular_name' => __( 'proyecto' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'proyectos'),
        )
    );
    flush_rewrite_rules( false );
}
add_action( 'init', 'create_posttype' , 1);

Recuperar Custom Post Type

$args = array(
    'post_type' =>'proyectos',
    'taxonomy' => 'proyecto',
    'parent' => 0,
    'hide_empty' => false,   
    'posts_per_page' => 2 // -1 para mostrarlos todos
);
 
$proyectos = new WP_Query( $args );
if( $proyectos->have_posts() ) :

?>
  <ul>
    <?php
      while( $proyectos->have_posts() ) :
        $proyectos->the_post();
        ?>
        <div class="box_custom_post_type">
        <div><?= get_the_post_thumbnail() ?></div>
        <h3><a href="<?=get_post_permalink() ?>"><?=get_the_title() ?></a></h3>
        <div><?= get_the_content() ?></div>
        </div>
        <?php

      endwhile;
      wp_reset_postdata();
    ?>
  </ul>
<?php
else :
  esc_html_e( 'No proyectos in the diving taxonomy!', 'text-domain' );
endif;
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?