Hi am new to WordPress theme development and coding (please bare with me :) ). I have a HTML template which works completely fine. When trying to load the style.css file , the styles does not load fully. Not only that it hides the top navigation.
I removed the css from style.css and the top navigation (from header.php) loads. It's only when I enqueue the css that the navigation bar is hidden. Functions.php code:
<?php
function load_my_styles()
{
wp_enqueue_script('popper',get_theme_file_uri('//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', NULL,'1.0', true));
wp_enqueue_script('main-js',get_theme_file_uri('/js/main.js', NULL,'1.0', true));
wp_enqueue_script('anime',get_theme_file_uri('//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', NULL,'1.0', true));
wp_enqueue_script('jquery',get_theme_file_uri('/vendor/jquery/jquery.js', NULL,'1.0', true));
wp_enqueue_script('custom-js',get_theme_file_uri('/vendor/bootstrap/bootstrap.min.js', NULL,'1.0', true));
wp_enqueue_script('swiper',get_theme_file_uri('/vendor/bootstrap/swiper.min.js', NULL,'1.0', true));
wp_enqueue_style('custom-css',get_theme_file_uri("/vendor/bootstrap/bootstrap/bootstrap.min.css"));
wp_enqueue_style('swiper',get_theme_file_uri("/vendor/bootstrap/bootstrap/swiper.min.css"));
wp_enqueue_style('main-stylesheet',get_stylesheet_uri());
wp_enqueue_style('font-awesome',get_theme_file_uri("//use.fontawesome.com/releases/v5.6.3/css/all.css"));
wp_enqueue_style('maincss',get_theme_file_uri("/css/mainstyle.css"));
}
add_action('wp_enqueue_scripts','load_my_styles');
?>
You need to understand the concept of dependencies. When you enqueue a script or a stylesheet, 5 parameters are usable.
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
Parameters
Description
$handle
(string) (Required) Name of the script. Should be unique.
$src
(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.
$deps
(string[]) (Optional) An array of registered script handles this script depends on.
$ver
(string/bool/null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
$in_footer
(bool) (Optional) Whether to enqueue the script before instead of in the .
An array of registered script handles this script depends on.
Right now your scripts are just fighting one another to be the first to load, therefore causing some troubleshoot.
For example your main.js is probably requiring jquery.js to work properly. If main.js load before jquery.js the chances are, nothing will work. And so on and so on with the rest of the files.
Now I your case i've made a few changes, you should, by taking a look at it have a better understanding.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
wp_enqueue_script( 'jquery_js', get_template_directory_uri( '/vendor/jquery/jquery.js', array(), '1.0.0', true ) );
wp_enqueue_script( 'popper_js', get_template_directory_uri( '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery_js' ), '1.14.7', true ) );
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri( '/vendor/bootstrap/bootstrap.min.js', array( 'popper_js' ), '1.0.0', true ) );
wp_enqueue_script( 'swiper_js', get_template_directory_uri( '/vendor/bootstrap/swiper.min.js', array( 'bootstrap_js' ), '1.0.0', true ) );
wp_enqueue_script( 'anime_js', get_template_directory_uri( '//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', array( 'swiper_js' ),'2.0.2', true ) );
wp_enqueue_script( 'main_js', get_template_directory_uri( '/js/main.js', array( 'anime_js' ), '1.0.0', true ) );
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri( '/vendor/bootstrap/bootstrap/bootstrap.min.css' ), array(), '1.0.0', 'all' );
wp_enqueue_style( 'swiper_css', get_template_directory_uri( '/vendor/bootstrap/bootstrap/swiper.min.css' ), array( 'bootstrap_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'font_awesome', get_template_directory_uri( '//use.fontawesome.com/releases/v5.6.3/css/all.css' ), array( 'swiper_css' ), '5.6.3', 'all' );
wp_enqueue_style( 'style_css', get_template_directory_uri(), array( 'bootstrap_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'main_css', get_template_directory_uri( '/css/mainstyle.css' ), array( 'bootstrap_css' ), '1.0.0', 'all' );
};
}; ?>
Learn more
A bit of reading # Enqueue, Register & Load CSS and JavaScript with Wordpress
Related
I need to have color picker settings filed in my plugin. I have registered a field and its saving value in the database correctly. But, in the admin area the picker user interface is not correct I think.
It should look like this:
https://ibb.co/7XRHqqL
But in my case it's looking like this:
https://ibb.co/vHvqmd0
Here is the code I have for registering the field
add_settings_field( 'iconBg', 'Background Color', array( $this, 'bg_settings_field' ), 'wpfyscroller-settings-page', 'wpfyscrollersection' );
register_setting( 'wpfyscrollerfields', 'iconBg', array('sanitize_callback'=>'sanitize_hex_color', 'default'=> '#000000') );
//Callback function
function bg_settings_field() { ?>
<input type="text" name="iconBg" value="<?php echo get_option('iconBg') ?>" class="cpa-color-picker" >
<?php }
Here is the code for enqueueing js
add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
function enqueue_admin_js() {
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( '/assets/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true );
}
NOTE: My 'jquery' dependency already loaded with another script.
Here is the JS code:
(function ($) {$(function () {
// Add Color Picker to all inputs that have 'color-field' class
$(".cpa-color-picker").wpColorPicker();});})(jQuery);
Not sure what mistake I did, any help will be apricated.
Thanks
You can try the below code and hopefully work it. Your issue was on enqueue js.
/**
* Enqueue style & scripts for color picker
*
* #return void
*/
function enqueue_admin_js() {
// wp-color-picker
wp_enqueue_style( 'wp-color-picker' );
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( '/assets/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true );
}
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
I'm trying to add new scripts and a css file to my child's theme on wordpress but i'm getting the following errors.
GET https://linton59.co.uk/wp-content/themes/simpleshift/css/lightbox.css?ver=4.3.0 net::ERR_ABORTED
(index):280 GET https://linton59.co.uk/wp-content/themes/simpleshift/js/lightbox-plus-jquery.js?ver=3.3.0 net::ERR_ABORTED
(index):279 GET https://linton59.co.uk/wp-content/themes/simpleshift/js/lightbox.js?ver=3.3.0 net::ERR_ABORTED
(index):68 GET https://linton59.co.uk/wp-content/themes/simpleshift/css/lightbox.css?ver=4.3.0 net::ERR_ABORTED
The following is the functions.php i'm using.
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION
add_action( 'wp_enqueue_scripts', 'theme_name_scripts', 20 );
function theme_name_scripts() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'theme_light', 30 );
function theme_light() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_style( 'lightbox', get_template_directory_uri() . '/css/lightbox.css', array(), '4.3.0' );
wp_enqueue_script( 'lightbox2', get_template_directory_uri() . '/js/lightbox.js', array( 'jquery' ), '3.3.0', true );
wp_enqueue_script( 'lightbox3', get_template_directory_uri() . '/js/lightbox-plus-jquery.js', array( 'jquery' ), '3.3.0', true );
}
My child's theme has a css folder and js folder with the relevant files in it.
The last action is the only part not working.
get_template_directory_uri() will always return the URI of the current parent theme.
To get the child theme URI instead, you need to use get_stylesheet_directory_uri().
I'm writing a plugin that uses 'admin_enqueue_scripts' to load css and js files.
I use the exact same method to load css and js.. But only the css is loaded in the head section, js files are loaded in the footer?
Can't figure out why?
The wp codex (https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts) at the example clearly states:
"In this example we are loading a javascript file in the head section of edit.php."
Here's my code:
// add scripts and styles only available in admin
add_action( 'admin_enqueue_scripts', array( $this, 'eman_add_admin_JS' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'eman_add_admin_CSS' ) );
public function eman_add_admin_CSS() {
if(is_admin() && $_GET['page'] == 'enjoyit-management' || $_GET['page'] == 'management-settings'){
wp_register_style( 'eman-style-admin', plugins_url( '/css/eman-style-admin.css', __FILE__ ), array(), '1.0', 'all' );
wp_enqueue_style( 'eman-style-admin' );
}
}
public function eman_add_admin_JS() {
if(is_admin() && $_GET['page'] == 'enjoyit-management' || $_GET['page'] == 'management-settings'){
// Load jQuery, just to be sure.
wp_enqueue_script( 'jquery' );
wp_register_script( 'eman-script-admin', plugins_url( '/js/eman-script-admin.js' , __FILE__ ), array('jquery'), '1.0', true );
wp_enqueue_script( 'eman-script-admin' );
}
}
Only if you put true in the enqeue or register_script it will load in the header.
The 'best' place for jquery and javascript is to be loaded in the footer. Because it won't cause lag on your website.
But if you want it in the header you should use
wp_register_script( 'my-script', plugins_url( 'my-script.js' , __FILE__ ), array('jquery'), '1.0', false );
wp_enqueue_script( 'my-script' );
OMG, sorry, after posting I read the codex about 'wp_register_script', and there it was. The last parameter is a '$in_footer' boolean, which is set to true... aargh..
I have the following pieces of code that I use to include styles and java-scripts on a settings page within the WordPress admin area. I have a class with a singleton that I use to initiate my admin pages. I stripped everything except the needed pieces of code to make it more readable.
The problem that I'm having is that by using the set-up below is that the style-sheets on the settings page are placed at the bottom of the page instead of in the head of the page. I can get it in the header by using other action hooks, but that would defeat the purpose. As far as I know the set-up I used is the same setup as is described with the wp_enqueue_style command.
There is a small hint with the command "wp_enqueue_style() can now be called mid-page (in the HTML body). This will load styles in the footer.". If that is true that would mean that the 'admin_print_scripts-*' hook is called somewhere mid-page instead of at the start en doing so places the css in the footer.
Any thoughts on that. an I doing something wrong ?
Thanks for your time.
This is how the singleton class is called within the functions.php file
theme::instance( );
This is part of the class that I used to create the admin pages
class theme {
static public function instance( )
{
is_null( self::$instance ) AND self::$instance = new self;
return self::$instance;
}
public function __construct()
{
add_action( 'admin_menu', array( $this, 'initMenu' ), 10, 0 );
add_action( 'admin_init', array( $this, 'registerAssets' ), 10, 0 );
}
public function registerAssets( )
{
// Styles
wp_register_style( 'cen', 'style.css', array( ), '1.0' );
wp_register_style( 'cen-settings', 'settings.css', array( 'cen' ), '1.0' );
// Scripts
wp_register_script( 'cen', 'settings.js', array( 'jquery' ), '1.0', true );
}
public function initMenu( )
{
// Index page
$index =add_menu_page( 'Cen', 'Cen', 'manage_options', 'cen-index', function (){ require_once( get_template_directory( ) . '/pages/index.php' ); }, get_template_directory_uri() . '/images/icons/logo_16.png', "110.00" );
// Settings page
$settings =add_submenu_page( 'cen-index', 'Cen - Settings', 'cen' ), 'Settings', 'manage_options', 'cen-settings', function (){ require_once( get_template_directory( ) . '/pages/settings.php' ); } );
// Add action for assets on the settings page
add_action( 'admin_print_scripts-' . $settings, array( $this, 'initSettingsPage' ));
}
public function initSettingsPage( )
{
// Styles used
wp_enqueue_style( 'cen' );
wp_enqueue_style( 'cen-settings' );
// Scripts used
wp_enqueue_script( 'jquery-ui-tabs' );
wp_enqueue_script( 'cen' );
}
}
The action hook admin_print_scripts you're using is used to add inline script so it's strongly recommended to use admin_enqueue_scripts to enqueue scripts/styles in the admin.
Try it. Hope it works!
I am trying to load two scripts through the wp_enqueue_script(). I made to functions but only the first loads not the second one. Here is the code:
//Load my own jQuery
function fix_noconflict() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery' , 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' );}
add_action( 'wp_enqueue_scripts' , 'fix_noconflict' );
//This two functions follow the same
function mauricio_bootstrap_script_jquery() {
//Includes bootstrap jQuery
wp_register_script( 'custom-script', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap.js', array( 'jquery' ) );
//This enqueus the script
wp_enqueue_script( 'custom-script' );
}
// Adds the new bootstrap function to the wp_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'mauricio_bootstrap_script_jquery' );
function mauricio_bootstrap_script_carousel() {
wp_register_script( 'myscript', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap-carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript' );
}
add_action( 'wp_enqueue_script', 'mauricio_bootstrap_script_carousel' );
Just for the record I have wp_head() in my header. And as I said it loads the first function that includes bootstrap.js.
Thanks,
M
Why don´t you try to put all your functions inside a main function, like this?
function wpEnqueueScripts(){
// Adds the new bootstrap function to the wp_enqueue_scripts
wp_register_script('custom-script', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap.js', array('jquery'));
wp_enqueue_script('custom-script');
// Adds the new bootstrap function to the wp_enqueue_scripts
wp_register_script('myscript', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap-carousel.js', array('jquery'));
wp_enqueue_script('myscript');
}
add_action('wp_enqueue_scripts', 'wpEnqueueScripts');
Someone at the wordpress forum provided this. The two functions were combined and when adding the action the use of the 'template_redirect' $tag is used instead of the 'wp_enqueue_script'
function mauricio_bootstrap_scripts() {
wp_register_script( 'custom-script', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script' );
wp_register_script( 'myscript', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap-carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript' );
}
add_action( 'template_redirect', 'mauricio_bootstrap_scriptsl' );