Qu necesitas aprender para programar en WordPress?

Como
ya
hemos
comentado
otras
veces,
si
eres
capaz
de programar en WordPress y en la web en general, accedes a otra dimensin de
posibilidades para tu proyecto online.
Esto es as porque saber programar fulmina todas las barreras que te puedas
encontrar en el desarrollo de tu proyecto online, ya no dependers del plugin X
para hacer tal cosa o de encontrar el tema Y para el diseo que te gusta para tu
web.
Si algo no est hecho, lo haces t y listo. Y sabiendo programar, sers capaz de
hacer literalmente lo que te de la gana en tu proyecto. Adems, sers envidiado
por otros bloggers :)
Ahora bien, si nunca has programado y no tienes una base tcnica, plantearte
aprender a programar, aunque te apetezca, seguramente te d algo de vrtigo
Normal.
Por eso, hoy te quiero explicar los fundamentos necesarios para que te hagas una
idea de cmo funciona todo esto de programar en WordPress (y en la web en
general), y que veas que no es para tanto. Est al alcance de quien se lo
proponga en serio.
Tabla de contenidos [ocultar]
HTML y CSS: La base de todo
1. HTML. El lenguaje para crear los contenidos en la web
2. CSS. El lenguaje para la presentacin visual
3. JavaScript. Hacer pginas web ms inteligentes
De pginas web estticas a aplicaciones web
1. PHP. El lenguaje de programacin N1 de la web
2. MySQL. La base de datos open source ms popular del mundo
Cmo se programa en WordPress
Programar en WordPress slo con CSS
Programar en WordPress con PHP
Programar con el API de WordPress
Conclusiones

Y para ello, creo que la mejor manera es contarte cmo y por qu han nacido a lo
largo del tiempo las diferentes tecnologas que conforman la programacin web
que son, a su vez, la base para la programacin en WordPress.
Adems, creo que no vas a entender solamente cmo se programa en WordPress,
sino que te va a dar una visin y compresin del funcionamiento de la web en
general que te har entender mucho mejor todo el puzle tcnico, su filosofa y por
qu existen plataformas como WordPress en la web.
Este artculo es un calentamiento previo al Curso de programacin WordPress.
Apntate hasta el 4 de julio y disfruta tambin de un bonus especial :)
Accede al curso aqu
Por eso, antes de hablar de cmo se programa en WordPress, djame que te
cuente la historia completa de cmo se ha llegado hasta aqu.
HTML y CSS: La base de todo
Se usen las tecnologas que se usen, nuestro objetivo final siempre va a ser la
creacin de pginas web. Por eso tenemos que empezar hablando de las
tecnologas en las que estn hechas las pginas web, eso es el fundamento de
todo lo dems.
1. HTML. El lenguaje para crear los contenidos en la web
HTML (siglas de HyperText Markup Language) es un lenguaje de marcado que
permite describir la estructura y contenido de una pgina web. La idea consiste
bsicamente en aadir a un texto normal etiquetas de apertura (<>) y cierre (</>)
que le dan semntica a determinados trozos de este texto.
Mira este ejemplo:

<h1>Cmo trabajar con HTML</h1>

1

<p>Para
aprender
a
trabajar
con
<a
2 href=http://es.wikipedia.org/wiki/HTML>HTML</a>, lo primero que hay que
hacer es</p>
En la primera lnea estamos demarcando un trozo de texto como ttulo o cabecera
de nivel 1 (principal), la h de la etiqueta viene de la palabra en ingls de
cabecera (header).

En la segunda lnea estamos marcando un trozo de texto como prrafo

(paragraph) y dentro del mismo, a su vez, hemos marcado el texto de HTML
como un enlace a la Wikipedia indicando a dnde ha de apuntar el enlace con un
atributo especial href dentro de la etiqueta del enlace (etiqueta a de anchor,
ancla en ingls).
Qu ventaja tiene esto frente a un texto normal?
Muy simple: que una herramienta que entienda HTML, como un navegador web
que est visualizando este contenido, puede usar esta informacin semntica para
hacer cosas con ella: darle un tipo y tamao de letra ms grande a los ttulos y
subttulos, destacar el enlace con un subrayado y hacer que al pulsar sobre l
saltes a la URL enlazada, etc.
Esta es la idea detrs del concepto de hipertexto que ha revolucionado la
informtica y el mundo entero con el nacimiento de la web.
No pretendo que te conviertas con esta breve explicacin en un crack del HTML,
pero creo que ya sirve para que pilles la filosofa de cmo funciona esto y que, en
el fondo, es muy simple.
Pero si quieres profundizar un poco ms, echa un vistazo aqu:
Cmo hacer una pgina web con HTML
2. CSS. El lenguaje para la presentacin visual
Al principio, cuando naci HTML (1991), las posibilidades programacin web se
limitaban bsicamente a lo que acabas de ver y una de las limitaciones ms
obvias que tenan era que el lenguaje HTML era muy pobre en el lado esttico.
De hecho, si has llegado a vivir los comienzos de la web en Espaa all por el ao
1995 ms o menos, te acordars que las pginas web eran,
generalmente, horrorosamente feas, nada que ver con los diseos que te puedes
encontrar hoy en da y que en ocasiones son autnticas obras de arte.
Esto es as porque la esttica no era un tema importante para el HTML, no era su
objetivo.
El objetivo era crear algo que permitiese implementar la idea del hipertexto
enlazado a travs de Internet y, sobre todo, Tim Berners-Lee, el padre de la web y
del HTML, seguramente ni so con el xito que tuvo su proyecto convirtindose
en una herramienta de masas, imprescindible en nuestras vidas de hoy en da.
Lo que haba ideado en principio era simplemente una herramienta de intercambio
de informacin en el mbito acadmico que era dnde se usaba Internet ya desde
1969.

Total, era evidente que esto no se poda quedar as y que era necesario poder
crear pginas web mucho ms atractivas visualmente.
Adems, habra otra idea de diseo fundamental: separar el contenido (y su
estructura y semntica) de su representacin visual. Es decir, no mezclar ambas
cosas en el marcado HTML.
Esto permitira cosas muy elegantes como, por ejemplo, que un mismo contenido
se visualizase con maquetaciones completamente diferentes, sin tener que tocar
el contenido en s.
Esto sera muy til, por ejemplo, para visualizar una misma pgina completamente
diferente en funcin de si se ve en un ordenador o un telfono mvil (muy
limitados para visualizar contenidos, adems, en aquella poca).
Por eso se tom la decisin de limitar el HTML para lo que ya estaba, el contenido,
y abordar la parte de representacin visual con otro lenguaje diferente:
Las hojas de estilo en cascada CSS (Cascading Style Sheets).
Estas hojas de estilo son tambin un lenguaje diseado especficamente para
definir y crear la representacin visual de un documento HTML cuya primera
versin (CSS1) se public en 1995, aunque se tard mucho ms en usarse en las
pginas web de manera habitual. En la actualidad vamos por CSS3.
La filosofa bsica es que permite describir para cada etiqueta HTML (recuerda,
cosas como <h1>, <p>, <a>, etc.) sus aspectos estticos y bajo qu condiciones
(reglas) se le deben aplicar o no.
Por ejemplo, con una regla as, estaramos definiendo propiedades estticas
bsicas de un ttulo principal:

1 h1 {
2 color: #f0f0f0;

/* Un gris muy oscuro */

3 font-family: Arial;
4 font-size: 24px;
5 text-align: center;
6}

La regla empieza diciendo que aplica a las etiquetas HTML <h1> (ttulos
principales, nivel 1) y que todos ellos han de tener un color gris oscuro casi negro
(cdigo #f0f0f0), han de usar el tipo de letra Arial, un tamao de letra de 24
pixeles y que estos ttulos han de estar alineados al centro.
Si te fijas, esto es exactamente igual que lo que haces en un editor de texto como
Word, por ejemplo. La diferencia es simplemente que aqu no tenemos un interfaz
de usuario dnde hacer clic en botones y desplegables, sino que se lo tenemos
que describir de alguna manera al servidor web que aloje la pgina. Y eso es
precisamente lo que CSS nos permite hacer.
Y con esta regla estaramos haciendo algo similar para los prrafos, aunque no
especificamos expresamente la alineacin del texto puesto que por defecto ya se
alinear a la izquierda, que es lo que queremos para nuestros prrafos:

1p{
2 color: black; /* Equivale a #ffffff que es el cdigo para negro */
3 font-family: Verdana;
4 font-size: 16px;
5}
Son reglas muy, muy simples comparado con lo que se puede llegar a hacer con
CSS en la versin actual, CSS3, que es realmente increble.
Pero creo que este ejemplo tambin es suficiente para que te hagas
perfectamente una idea de cul es la filosofa de este lenguaje.
3. JavaScript. Hacer pginas web ms inteligentes
Hoy en da no se puede hablar de pginas web sin mencionar JavaScript.
Con JavaScript tengo dos noticias para ti, una mala y otra buena:
La mala: No es tan fcil de aprender como HTML y CSS. JavaScript ya no es un
simple lenguaje descriptivo como estos dos, sino un lenguaje de programacin en
toda regla y con ello ms complejo de aprender.
La buena: En la prctica, no necesitars aprender JavaScript. Yo mismo soy
desarrollador de profesin desde hace tiempo y tengo un dominio muy reducido de
JavaScript.

Una manera muy simplificada, pero fcil de entender, de definir qu hace

JavaScript en una pgina web es que vers JavaScript bsicamente cuando
manipulas elementos que se mueven.
Un ejemplo tpico sera un calendario que te permite navegar por los meses y
aos, y seleccionar un da. Ese tipo de elementos complejos se programan con
JavaScript. Ya te puedes imaginar que programar un calendario como ste no es
algo fcil de aprender para un novato.
Ahora bien, si este tipo de cosas que se ven tan frecuentemente en las pginas
requieren JavaScript, por qu digo que incluso yo como desarrollador profesional
prcticamente no he necesitado aprender JavaScript?
Muy simple: porque si alguna vez necesitas cosas como, por ejemplo, implementar
un componente como un calendario, prcticamente cualquier cosa que puedas
necesitar ya la encontrars hecha y slo tendrs que hacer un cortar y pegar en
tu cdigo gracias a la increble comunidad de JavaScript que hay en la red y
a jQuery.
jQuery es una librera (una coleccin de cdigo) gratuita que implementa
prcticamente cualquier cosa que puedas necesitar, adems, hay infinitos
proyectos de cdigo libre que se han basado en jQuery para crear a su vez
nuevos componentes ms sofisticados sobre su base. Busca, por ejemplo,
calendario jquery en Google y vers una infinidad de opciones.
En definitiva, JavaScript es un tema para una fase ms avanzada de
programacin web y gracias a jQuery encontrars casi todos los problemas
resueltos con cdigo libre ya hecho por otros. Una de las maravillas de esto de
Internet.
De pginas web estticas a aplicaciones web
Lo que hemos visto hasta ahora es la programacin de pginas web estticas.
Eso quiere decir que una vez creada, la pgina es como es, con JavaScript le
puedes meter cosillas dinmicas como un calendario, pero la pgina sigue
siendo la que es bsicamente, no cambia y, por tanto, con una web con pginas
HTML hechas as, lo nico que podras hacer es saltar de unos contenidos
estticos a otro, no puedes trabajar e interactuar demasiado con pginas as.
1. PHP. El lenguaje de programacin N1 de la web
Por ejemplo: Imagnate que ahora quieres implementar una cosa como
comentarios, tal como existen en WordPress, Facebook y millones de otros sitios
web.
Cmo hacerlo?
Muy simple: no puedes.

Y ahora dirs:
Pero si has dicho que todas las pginas estn hechas con HTML, CSS y
JavaScript y existen en esas webs, cmo que no se puede?
Pues s, no se puede porque nos hace falta algo ms: aprender a crear las
pginas de una maneradinmica y esto requiere saber programar en un lenguaje
como, por ejemplo, PHP, el ms popular de la web. Cmo vers luego, en este
punto es donde todo esto empieza a enlazar con el mundo de la programacin en
WordPress porque WordPress es, de hecho, una aplicacin programada en PHP.
Pero eso de de manera dinmica, qu quiere decir exactamente?
Quiere decir que empleamos un truco para poder hacer cosas como lo de los
comentarios. Al final, el resultado ser tambin una pgina HTML normal y
corriente, pero el truco est en la manera de la que se crea esa pgina.
Para que lo puedas entender, lo mejor es contrastar el modo esttico y esta nueva
tcnica dinmica entre ellas:
Cmo funcionan las pginas HTML estticas en una web
Cuando las pginas son estticas, son simples ficheros, similares a los de un
documento Word o una hoja Excel, por ejemplo. Luego para que puedas navegar
por esas pginas en una web, necesitas tener contratado un dominio y un servidor
web (un hosting) al cual subir esos ficheros.
Ejemplo:
Supongamos que has creado un fichero hola.html y tienes un domino
midominio.com y hosting contratados.
Si quieres ver tu pgina en tu web, es tan simple como subir hola.html con las
herramientas de tu hosting al servidor.
Para tu hosting te recomiendo Webempresa o Hostgator
Descuentos hasta un 25% y una comparativa aqu
Si subes el fichero tal cual al directorio raz de tu hosting, podrs navegar por l a
travs dehttp://midominio.com/hola.html
Tambin puedes crear una estructura de carpetas que se reflejar tal cual, en las
URLs, por ejemplo, si creas una carpeta prueba-1 y metes el fichero dentro de
ella, vers la pgina enhttp://midominio.com/prueba-1/hola.html
Cuando accedes a estas URLs, el servidor web devuelve el fichero hola.html sin
ms al navegador desde el cual ests accediendo a la web, igual que cuando te
descargas cualquier otro fichero de Internet. Una vez descargado, el navegador lo
visualiza. Tan simple como eso.

Y as es cmo se creaban las webs antao. Fcil, no?

S, pero tambin muy, pero que muy limitado, como vimos antes con el ejemplo de
que tan slo con esto no podemos implementar una cosa tan bsica como una
seccin de comentarios.
Cmo funcionan las pginas HTML dinmicas en una web
Te deca que en modo dinmico el resultado final es el mismo (una pgina HTML
que se visualiza en tu navegador), pero que haba un truco adicional que lo
cambia todo.
El truco es que cuando accedes a una URLs en la que se encuentra una pgina
dinmica, esa pgina no se descargas simplemente como fichero HTML sin ms
como en el caso de las pginas estticas.
En este caso, lo que ocurre es que ese fichero no tiene slo cdigo HTML, sino
cdigo de un lenguaje de programacin para crear pginas dinmicas como PHP
que se ejecuta al acceder a la URL en cuestin, antes de pasarla al navegador.
Lo que va a devolverse al navegador web en este caso no es el fichero original tal
cual, si no, su contenido en HTML, combinado con el resultado (en HTML) de
ejecutar el cdigo de programacin que contiene.
Ese resultado tiene formato de HTML, pero la diferencia con la pgina esttica es
que se ha creado sobre la marcha, fruto de ejecutar previamente el cdigo (PHP
en nuestro caso) que contena esa pgina. El resultado, normalmente, ser
diferente en cada acceso y, por eso, este tipo de pginas se llaman dinmicas,
van cambiando.
A continuacin puedes ver un ejemplo muy simple de una pgina dinmica PHP.

1 <!DOCTYPE HTML>
2 <html>
3
4

<head>
<title>Ejemplo de pgina dinmica</title>

</head>

<body>

7
8
9
10
11
12
13
14
15
16

<h1>Ejemplo de pgina en PHP</h1>

<h2>Seccin normal de HTML</h2>
<p>Este prrafo y su ttulo son HTML normal.</p>
<?php
$temperatura = obtenerTemperatura();
echo "<h2>Seccin creada dinmicamente con PHP</h2>";
echo "<p>Actualmente,
grados.</p>";

la

temperatura

es

de

".$temperatura."

?>
</body>
</html>

Fjate que en su mayora, en realidad, es HTML normal, pero tiene un pequeo

trocito de PHP cuyo comienzo se demarca con <?php en el cdigo y el final con
?>.
Esta pgina muestra la temperatura actual. Como la temperatura va variando, hay
que crear esta pgina dinmicamente, no vale un contenido fijo.
Para poder hacer esto, el cdigo PHP usa la variable $temperatura que funciona
como una especie de comodn para escribir contenido HTML variable en funcin
del valor que reciba esa variable (para el ejemplo no nos importanta cmo puede
obtener la temperatura, lo que importa es que la variable guardar su valor).
Con esto, componemos en PHP el texto fijo de Actualmente, la temperatura
ms la variable de la temperatura. Cuando se ejecute el cdigo, la instruccin
echo de PHP crear este texto sustituyendo la variable $temperatura por su
valor, 27,5, por ejemplo, y as se habr compuesto un texto final
como Actualmente, la temperatura es de 27,5 grados.
No hace falta que entiendas el cdigo y cmo lo hace, simplemente quiero que te
des cuenta de que esta pequea funcionalidad no la podriamos haber conseguido
con una pgina HTML con un contenido fijo, codificada de antemano.
Para que lo acabes de entender mejor, voy a ponerte un ejemplo ms fcil de
entender que el de los comentarios: una bsqueda en Google.
Cuando introduces una bsqueda en Google, Google te va a devolver una pgina
(resultados) diferente para cada bsqueda. Es obvio que Google no puede tener
preparadas de antemano esas pginas de resultados como pginas HTML porque
son infinitas. Tienen que generarse de una manera dinmica.

Cmo lo hacen?
Simplificando mucho es bsicamente esto: disponen de unas gigantescas bases
de datos con las pginas web que el buscador ha visitado previamente. El
buscador indexa cada una de estas pginas (es decir, determina un largo conjunto
de palabras clave afines a su contenido) y guarda esta informacin en la base de
datos.
La pgina web de resultados de la bsqueda a la que accede el usuario cuando
busca es siempre la misma, pero cada vez que accede a ella viaja como
parmetro (como informacin que recibe el servidor web) la palabra o frase de su
bsqueda concreta y esa pgina contiene un trozo de cdigo que toma ese
parmetro y lo procesa.

La pantalla de resultados de una bsqueda en Google vara en funcin de lo que

busque el usuario, por tanti, tiene que ser creada como pgina dinmica.
En este ejemplo, procesar quiere decir que el cdigo del programa de Google
consulta la base de datos para que le devuelta un listado ordenado por orden de
relevancia de las pginas afines a esa bsqueda del usuario que recibi como
parmetro, junto con los detalles de cada uno de los resultados como su ttulo, su
URL y el texto descriptivo.
Para generar la pgina del resultado de bsqueda, el cdigo recorrer esa lista y
crear contenido HTML para cada una de los resultados de la bsqueda. Por
ejemplo, el ttulo de cada pgina en un resultado de bsqueda de Google es en
este momento una etiqueta <h3> que contiene, a su vez, un enlace (etiqueta <a>).

Ese HTML lo va construyendo sobre la marcha el cdigo que se est ejecutando

en el servidor.
Cuando termine ese proceso, el servidor web habr construido una pgina HTML
normal y corriente, pero de una manera dinmica, con un contenido que no estaba
determinado de antemano como en una pgina web esttica que es un simple
fichero invariable sin ms.
Llegado a ese punto, el servidor web le devuelve este HTML al navegador web
exactamente igual que si hubiese sido una pgina web esttica y el usuario ve los
resultados de la bsqueda. De hecho, el navegador web no se entera de la
diferencia entre pginas web dinmicas y estticas. l slo ve que le llega un
fichero con HTML, toda la magia ocurre en el lado del servidor web.
Esto es cmo funcionan las pginas dinmicas y con esta tcnica es posible ir
ms all de simples colecciones de contenidos en HTML y crear aplicaciones
interactivas en toda regla. Por eso, en este caso se habla tambin de aplicaciones
web. WordPress o PrestaShop, por ejemplo, son aplicaciones web.
Por qu ha arrasado PHP a nivel mundial?
Pues bien, visto este ejemplo de cmo funcionan las aplicaciones web, slo queda
decirte que PHP es una de las mejores opciones, sino la mejor, que existen para
crear aplicaciones web. Una razn ms para aprender un poquito de PHP.
PHP debe su enorme popularidad, a mi modo de ver, estos factores clave:
Es cdigo libre y de fuentes abiertas: Todo el mundo se lo puede descargar y usar
sin coste, igual que las dems herramientas para trabajar en PHP (servidor web
Apache, etc.).
Es el estndar en los hostings: Prcticamente cualquier hosting (salvo en los
planes hiperbaratos de 2-3 en algn caso) soportan PHP, sin embargo, no
soportan (salvo en casos especializados) otros lenguajes de programacin
tambin muy populares como Java o los lenguajes de la plataforma .Net de
Microsoft. En ese sentido, PHP es el estndar de facto en lenguajes programacin
web.
Los grandes proyectos libres estn hechos con l: La misma Wikipedia,
WordPress,Joomla o PrestaShop son tan slo unos pocos ejemplos de megaproyectos realizados en PHP. Por eso, los puedes instalar en un hosting
convencional no especializado y, encima, gratis.
Es moderno y potente, ideal para programar en web: Es un lenguaje de
programacin moderno y potente que naci poco despus de la web en 1995 y te
puedo decir que es una delicia programar en l en web. Se nota muchsimo que
naci y evolucion junto con la web y que su diseo ha sido realimentado por la
experiencia y buen criterio de una enorme comunidad de usuarios.

Es asequible de aprender: Es muy asequible empezar a aprender a programar en

PHP, especialmente si se compara con otros lenguajes de programacin como, C+
+, por ejemplo. Incluso, ni siquiera es estrictamente necesario instalar un entorno
de programacin (aunque es lo suyo, claro suyo). Pero para empezar a
experimentar un poco sera suficiente crear una carpeta en tu hosting y un
fichero .php dentro de ella. Tan slo con eso puedes empezar a hacer tus primeros
pinitos.
2. MySQL. La base de datos open source ms popular del mundo
Cuando una aplicacin maneja una gran cantidad de datos, resulta imprescindible
una base de datos. Y en Internet la base de datos de cdigo de fuentes abiertas
(cdigo fuente disponible libremente, open source en ingls) ms popular del
mundo, con diferencia, es MySQL. Al igual que PHP, suele ser tambin un
estndar en los buenos hostings.
Para tu hosting te recomiendo Webempresa o Hostgator
Descuentos hasta un 25% y una comparativa aqu
Si no sabes lo que son las bases de datos, te las puedes imaginar de una manera
simplificada como una gran coleccin de tablas con informacin, relacionadas
entre s, parecidas a las tablas que usan las hojas de clculo.
La principal utilidad de una base de datos es que:
Permite almacenar de una manera organizada y eficiente cantidades gigantescas
de informacin.
Se puede interactuar con ellas desde lenguajes de programacin como PHP y
cualquier otro lenguaje razonablemente conocido.
A travs del lenguaje de consultas SQL, permiten hacer consultas inteligentes.
Imagnate, por ejemplo, la siguiente una consulta a la base de datos
de Amazon: Dame todos los productos que sean del tipo tablet y de la marca
Samsung. Es decir, usando SQL, facilitan mucho implementar las maneras tpicas
de cmo las personas interactuamos con las aplicaciones.
WordPress concretamente usa tambin una base de datos y la utiliza
prcticamente para todo, empezando por el contenido el cul, aunque t lo veas
como una pgina HTML normal, en realidad es HTML almacenado en su base de
datos.
De un modo similar, muchos de los plugins y temas que te instalas en WordPress
usan tambin la base de datos de WordPress para guardar la informacin con la
que trabajan y su configuracin.
Lo que nos interesa de todo esto es que en cuanto a MySQL lo que tienes que
saber es bsicamente SQL y tener unas nociones bsicas de cmo funcionan las

tablas de una base de datos (que es algo bastante sencillo), poco ms. Y slo si
necesitas almacenar y procesar datos en tus desarrollos, en la gran mayora de
los casos no lo necesitars hacer nada con bases de datos.
En cualquier caso, quiero recalcar que SQL es tambin un lenguaje bastante
asequible al nivel que te puede hacer falta.
Echa un vistazo a este ejemplo consulta:

1 SELECT nombre, descripcin, precio FROM productos

2 WHERE tipo = tablet AND marca = Samsung
Si sabes un poco de ingls, casi ni hace falta que te explique lo que hace,
verdad?
Esta consulta sacara el listado de productos de Amazon que puse un poco ms
arriba como ejemplo de qu se puede hacer con una consulta SQL a una base de
datos.
Cmo se programa en WordPress
Bien, veo que ya vamos por 4.000 palabras y no era mi intencin convertir esto en
un mega-post, pero si te lo has pasado tan bien leyndolo como yo escribindolo,
no pasa nada :)
En este punto ya has conocido todas las bases tcnicas que has de conocer para
programar en WordPress. De hecho, segn lo que quieras hacer, slo necesitara
dominar unas u otras.
Pero programar en WordPress es algo ms porque, adems, de lo que hemos
visto, hay que conocer WordPress, su diseo y una serie de reglas de WordPress
que hay que respetar si quieres programar bien en WordPress. As que para
rematar el post, echemos tambin un vistazo a vista de pjaro para que te hagas
tambin una primera idea de cmo se programa especficamente en WordPress.
Programar en WordPress slo con CSS
Quizs la manera ms simple de empezar a programar es en la parte esttica,
personalizando un tema con CSS.
Esto es, adems, un excelente ejemplo de cmo con saber programar tan solo un
poquito, algo que hayas aprendido en cuestin de horas, rompes barreras que
parecan infranqueables.

Concretemos el ejemplo:
Imagnate el tpico escenario de que has dado con un tema WordPress del
repositorio gratuito de WordPress que te gusta, pero tiene el tpico defecto de
estos temas: no puedes personalizar casi nada en la configuracin del tema y es
que no te gusta nada ni el tipo de letra del texto, ni su tamao y no hay ninguna
opcin por ningn lado para meterle mano a esto.
Pues bien, si aprendes CSS, descubrirs que solucionar este problema esttico (y
prcticamente cualquier otro) est tirado porque puedes crear una hoja de estilos
que modifique estas propiedades.
Esto resulta especialmente fcil si usas un plugin como Jetpack que dispone de un
mdulo CSS con un editor donde creas las reglas CSS con las propiedades que
quieres cambiar y listo.
Slo tienes que averiguar cules son las reglas originales que usa ese tema y
modificar las propiedades que te interesen en tus reglas sustitutas. Averiguarlas es
bastante fcil usando las herramientas de las que disponen los navegadores
habituales:
En definitiva, aunque ahora mismo lo que puedas ver en el vdeo te parecer
chino, si aprendes un poco de CSS, vers que es bastante sencillo.
Y la regla que tengas que editar en el mdulo CSS de Jetpack tendr una pinta
parecida a esto:

1 .entry-content p {
2 font-family: Open Sans, sans-serif;
3 font-size: 18px;
4}
Te has fijado en qu tontera se ha convertido una tarea que sin saber programar
pareca que era un callejn sin salida?
Programar en WordPress con PHP
Estando hecho WordPress en PHP y pudiendo acceder a sin restricciones a su
cdigo (que son los ficheros .php que instalas en tu hosting), es muy tpico que la
gente que empieza a hacer sus primeros pinitos en PHP empiece a toquetear de

una manera bastante imprudente el cdigo de WordPress sin ningn conocimiento

de cmo se programa realmente en WordPress.
Esto es una muy mala prctica que te quiero desaconsejar totalmente porque,
aparte de poder provocar la famosa pantalla blanca de la muerte de WordPress,
puedes provocar problemas mucho menos obvios a primera que te pueden pasar
una factura muy cara al cabo de un tiempo.
Uno de los ejemplos ms claros es lo que la gente hace en los temas WordPress.
Si en vez de hacer las modificaciones estticas por una va correcta como la arriba
descrita con reglas CSS aadidas con un plugin al tema las implementases
modificando directamente el cdigo PHP del tema, como hace mucha gente, qu
pasara?
Este artculo es un calentamiento previo al Curso de programacin WordPress.
Apntate hasta el 4 de julio y disfruta tambin de un bonus especial :)
Accede al curso aqu
Pues al principio nada, que es lo malo, veras los cambios y aparentemente todo
estara bien.
Imagnate que, tras la buena experiencia, sigues cambiando y cambiando, pasa un
ao y te has quedado realmente contento con el resultado de tu trabajo en el que
has invertido un montn de horas.
Un buen da, ves que hay una actualizacin del tema y lo actualizas, como es
recomendable.
Te vas otra vez al blog y, horror! Han desaparecido todas tus modificaciones!
Por qu?
Porque cuando WordPress actualiza un tema o plugin, borra por completo la
versin anteriordel tema o el plugin y con ello todas tus modificaciones.
Te la has cargado porque no sabas que un tema no se debe modificar as, a pelo,
sino a travs de lo que se conoce como un tema hijo (luego veremos lo que es
esto).
Esto es un buen ejemplo de lo que puede pasar si no te tomas las molestias de
aprender cmo se ha de programar en WordPress.
Por tanto, vamos a ver cmo se hacen las cosas bien.
Programar con el API de WordPress
Programar bien en WordPress quiere decir, respetar y usar su API.

Un API (Interfaz de Aplicacin, Application Programming Interface en ingls) lo

podramos definir como un conjunto de funciones o servicios que un determinado
producto ofrece para programar contra l para aprovechar as las funcionalidades
que ese producto ya ha implementado, junto con una serie de reglas de lo que se
debe y no debe hacer.
WordPress tiene un API enorme con una cantidad de funcionalidad enorme y si
queremos programar bien en WordPress, debemos usar el API siempre que sea
posible. Ya no por aprovechar el trabajo hecho, sino por no romper el
funcionamiento correcto de WordPress como pasaba en el ejemplo anterior de
modificar a pelo un tema WordPress sin pasar por un tema hijo.
Por suerte, el API de WordPress est muy bien organizado y se divide, en
realidad, en muchos APIs diferentes, segn lo que se quiera hacer concretamente.
Eso hace bastante fcil irte la documentacin, encontrar el API relacionado con lo
que quieras hacer y ver cmo se ha de hacer, aunque no tengas ni idea del API de
WordPress.
Voy a ponerte tan slo unos ejemplos destacados para que te hagas la ideas de
por dnde van los tiros.
Programar con shortcodes
Un shortcode es un texto envuelto entre corchetes que se puede escribir en un
post o pgina de WordPress y que hace algo, cualquier cosa que te puedas
imaginar.
Por ejemplo, en este mismo post, el cuadro de suscripcin a nuestra lista de
correo que ofrece gratis un ebook de copywriting se ha creado con el
shortcode [sbsbanner]. Simplemente lo he escrito en el lugar donde he querido
que aparezca el cuadro en este post y listo, WordPress y la rutina de cdigo a la
que llama ese shortcode hacen el resto.
Los shortcodes los puedes programar t mismo a tu medida (como es mi caso con
los cuadros de suscripcin, por ejemplo), pero tambin muchsimos plugins
con recopilaciones de shortcodesque hacen todo tipo de cosas. Por ejemplo: son
muy tpicos las recopilaciones de shortcodes para elementos visuales como
botones bonitos, recuadros para resaltar textos, tablas de precios, etc.
Piensa ahora en lo siguiente: imagnate que hubiese pegado el HTML para el
cuadro de suscripcin a pelo en cada post.
Qu pasara si lo actualizase?
Pues tendra que actualizar los ms o menos 300 posts que tiene esto blog. O
sea, antes de empezar ya me habra pegado un tiro
Qu pasa al haber usado un shortcode?

Que actualizo un momento la rutina que es ejecutada por el shortcode y listo. El

texto del shortcode como tal sigue siendo el mismo, por tanto, no tengo que tocar
ningn post. Sin embargo, todos ellos se habrn actualizado automticamente.
Tan sencillo y genial, no te parece?
Programar con hooks
Como has visto, los shortcodes son un mecanismo muy bueno para insertar
determinados componentes HTML en tus contenidos y reutilizarlos de una manera
inteligente, aunque tambin se pueden hacer cosas con ellos que no sean
visuales.
Hay un mecanismo muy parecido a los shortcodes para hacer eso en posiciones
fijas de las pginas, por ejemplo, al principio o al final de un post. Ese mecanismo
son los hooks. Hay hooks de WordPress y hooks adicionales que puede aadir,
por ejemplo, un tema de WordPress.
En el blog de Ciudadano 2.0, por ejemplo, uso, entre otros, un hook del
tema Genesis en la cabecera del post para modificar la seccin con la informacin
del autor (meto lo foto, etc.). Otro ejemplo lo tienes en el recuadro del autor, eso es
otro hook a travs del cual meto ese cuadro con la informacin del autor.
Y gracias a otras funciones del API no me tuve que preocupar de nada para
disponer de la foto, el nombre y el texto de presentacin del autor. Todo eso ya
est en la ficha del autor de WordPress y a travs del API, WordPress me lo
proporciona. Mi cdigo se lo pide todo al API y el API ya se ocupa de darme la
informacin correcto segn el post del que se trata y de lo nico de lo que se
ocupa mi cdigo es de maquetar esa informacin.
De ese modo, implementar ese cuadro 100% personalizado en el tema hijo de
Genesis que he creado para Ciudadano 2.0 ha sido hacer apenas unas pocas
lneas de cdigo. Otro ejemplo de lo potente que es tener un buen API como el de
WordPress.
Plugins
Los plugins son un mecanismo magnfico para ampliar la funcionalidad de
WordPress.
Ya habrs instalado muchos en tu sitio WordPress y no creo que te tenga que
explicar mucho ms sobre lo que es un plugin.
Tambin habrs visto el potencial que tienen, especialmente si has usado plugins
tan potentes como, por ejemplo, WooCommerce que convierte WordPress en una
tienda online completa. As que imagnate el potencial que tienes este mecanismo
para desarrollar tus propias cosas.

Simplemente decirte que es muy fcil empezar a hacer plugins sencillos, aunque
hacer plugins avanzados s que te va a requerir un conocimiento ms profundo
del API de plugins de WordPress.
En mi caso estoy usando en este momento un total de ocho plugins propios. Uno
de ellos es el plugin para las cajitas de suscripcin a la lista de correo y el
correspondiente popup. Otro ejemplo es la cajita para buscar dentro del blog que
puedes ver en la pgina home y despus de las cajitas de autor en todas las
pginas y otro el que aade el botn de Twitter en los comentarios.
Y dentro de poco vers en funcionamiento un plugin de desarrollo propio muy
gordo con el que estrenaremos una parte completamente nueva y muy
importante dentro de Ciudadano 2.0 y que ser algo bastante especial que no
existe como tal que yo sepa en otros sitios de nuestro nicho :)
Temas hijos
El ltimo ejemplo de casos tpicos de programacin WordPress es el caso de los
temas hijo que ya mencion anteriormente.
Es un mecanismo muy elegante de WordPress para poder crear temas WordPress
personalizados que se basen en otro tema (el tema padre) y permitan modificarlo
a discrecin sin el riesgo de verse afectados por una actualizacin del tema padre
como ocurra en nuestro ejemplo de tocar directamente el cdigo de un tema
WordPress sin respetar la buena prctica de crear un tema hijo para ello.
Crear la plantilla bsica para un tema hijo WordPress es increblemente fcil. Es
una hoja de estilo con nombre style.css con un comentario con esta estructura de
campos en las primeras lneas:

1 /*
2

Theme Name: Berto's Genesis Theme

Theme URI: http://www.ciudadano2cero.com

Description: Genesis Child Theme one-column style designed by Berto Lpez.

Author: Berto Lpez

Author URI: http://www.ciudadano2cero.com

Version: 0.5.9

Template: genesis
8

Template Version: 2.1.2

Tags: black, orange, white, one-column, two-columns, three-columns, leftsidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl10
language-support, sticky-post, theme-options, threaded-comments, translation11 ready
*/
Y eso es todo!
Si creas un fichero .zip con una carpeta y dentro de ella el style.css, ya tendras un
tema hijo que podras instalar perfectamente como un tema hijo. No modificara
nada del tema padre, es decir, se vera igual que el tema padre, pero ya sera un
tema hijo operativo en toda regla!
A partir de aqu, si las nicas modificaciones que quieres hacer son a nivel
esttico, bastara con escribir las correspondientes reglas CSS despus del
comentario anterior.
Esto sera una alternativa, por as decirlo, ms profesional al ejemplo de arriba
donde conseguamos el mismo resultado con un enfoque totalmente diferente:
aadiendo CSS a nuestro tema con una funcionalidad que proporciona el plugin
Jetpack para ello. No obstante, la solucin de Jetpack no deja de ser tambin una
buena solucin.
Si quieres hacer cosas ms avanzadas, como el ejemplo anterior de meter una
foto del autor de un post en la cabecera de informacin del autor, entonces ya
habra que aadir cdigo PHP y entraramos en el desarrollo de temas hijos
avanzados que lgicamente ya es ms complejo y ha de respetar estrictamente
las reglas del API de WordPress para hacerse bien.
Conclusiones
Al final ha sido un post enorme y si nunca has visto nada de programacin o y
programacin WordPress en particular, quizs ahora te sientas un poco abrumado.
Normal, y es que he metido en un nico post temas que llenaran daran
sobradamente para un ao de carrera universitaria
Ahora, si bien es cierto que para poder considerarte un verdadero experto en
todos estos temas, hara falta un esfuerzo de ese calibre, se trata de un mundillo
muy agradecido en el que es muy fcil empezar a hacer cosas.
A unas pocas decenas de horas de estudio y prctica ya les vas a sacar mucho
partido, tan slo eso te puede cambiar la vida en tus posibilidades como blogger.
Te permitira hacerte con una pequea base de HTML y CSS y empezar a hacer

tus primeros pinitos que ya te permitiran hacer cosas como personalizar cualquier
tema WordPress a tu gusto.
Con unas pocas horas ms que inviertas en PHP ya sers capaz de hacer cosas
ms avanzadas como shortcodes para crear, por ejemplo, elementos a medida
como los que usa este blog para insertarlos en tus contenidos.
El siguiente paso sera aprender a programar con PHP contra bases de datos,
contra MySQL concretamente. Esto ya es un poco ms exigente, pero no hay que
tenerle miedo, despacio y con buena letra se puede.
Adems, te aseguro que si te atrae la parte tcnica del blogging y de WordPress,
te lo vas a pasar como un enano. Cuando empiezas a dominar un poquito todo
esto, es algo muy divertido, bonito y gratificante.
De hecho, en mi caso, es as y muchas cosas se puede decir que las he hecho
ms por capricho personal y para pasar un buen rato que por motivos racionales,
como el caso de mis cajitas de suscripcin, por ejemplo. Podra haber usado
perfectamente un plugin como Thrive Leads y habra acabado mucho antes, pero
no me lo habra pasado tan bien :)
Y, por ltimo, de JavaScript puedes simplemente olvdate, no lo vas a necesitar, al
menos, al principio. Y cuando tengas un poco de prctica vers que gracias a
cosas como jQuery en este tema te darn todo el trabajo hecho.