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' );

// 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:

funcion wp_register_style nos permite añadir una hoja de estilos
funcion wp_deregister_style nos permite quitarla.
funcion wp_enqueue_style nos permite registrar un estilo

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' );

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' );

//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');

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