Como incluir tus propios javascript y css en WordPress


Vamos a ver como incluir tus propios javascript y css en WordPress de manera sencilla.

Tenemos varias formas de trabajar con un tema sobre todo cuando es un tema que no hemos creado nosotros y lo mejor es, no modificarlo y trabajar con un tema hijo. Cuando el autor del tema lo actualice todas aquellas modificaciones se borraran al actualizarlo nosotros y las perderemos.

Por eso se suele o crear un tema hijo o crear un plugin sencillo para añadir estas modificaciones.

Veamos el siguiente codigo:

// Register Style
function custom_styles() {	

}
add_action( 'wp_enqueue_scripts', 'custom_styles' );

Nos creamos una funcion en este caso custom_styles. Mediante la funcion add_action podemos hacer un hook o gancho a la funcion wp_enqueue_scripts y modificar la informacion.

Para poder añadir o quitar styles utilizamos las funciones:

 

Aqui os dejo un ejemplo de como añadir boostrap un framework css.

function custom_styles() { 

  wp_deregister_style( 'bootstrap' );

  wp_register_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, '3.3.6' );

  wp_enqueue_style( 'bootstrap' ); 

}
add_action( 'wp_enqueue_scripts', 'custom_styles' );

 

Ahora que hemos visto como añadir hojas de estilo a nuestro Tema de WordPress vamos a ver como añadir un javascript, el proceso es el mismo,  registramos el script y lo encolamos.

 

//Registramos javascripts
function custom_scripts() {

        // Registramos JQUERY
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'http://code.jquery.com/jquery-2.1.1.min.js', false, '2.1.1', false );
	wp_enqueue_script( 'jquery' );

        //REGISTRAMOS BOOTSTRAP
	wp_deregister_script( 'bootstrap' );
	wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array( 'jquery' ), '3.3.6', false );
	wp_enqueue_script( 'bootstrap' );

}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

 

En este caso usamos las funciones:

El proceso de ambos casos es muy similar.  Si quisieramos subir un css que tenemos en una carpeta dentro del tema.

Podemos usar get_template_directory_uri()

wp_enqueue_style('Owlcarousel', get_template_directory_uri() . '/assets/owl-carousel/owl.carousel.css');