$custom_style = 'css/pre/custom-styles.css';
function custom_stylesheet() {
wp_enqueue_style( 'aps-custom-style', APS_URL .$custom_style, APS_VER );
}
add_action( 'wp_enqueue_scripts', 'custom_stylesheet' );
APS_URL is the url of directory.
You have to pass it to the function:
$custom_style = 'css/pre/custom-styles.css';
function custom_stylesheet($custom_style) {
wp_enqueue_style( 'aps-custom-style', APS_URL .$custom_style, APS_VER );
}
add_action( 'wp_enqueue_scripts', 'custom_stylesheet' );
or declare it global:
$custom_style = 'css/pre/custom-styles.css';
function custom_stylesheet() {
global $custom_style;
wp_enqueue_style( 'aps-custom-style', APS_URL .$custom_style, APS_VER );
}
add_action( 'wp_enqueue_scripts', 'custom_stylesheet' );
wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
You should pass an array as $deps argument first, before $vers argument.
Related
After solving all problems I am stuck at a very simple problem in WordPress. That is enqueueing an stylesheet and js script. I am desperately looking for a solution. I don't know why this is not working. I think I am following the rules in codex but it's not loading anyways. Even I open the page source code to find those files but didn't find.
File name and locations are below:
popup_plugin
|---- assets\
|---css\
|--- styles.css
And js structure is same as above
Now here is the code i am trying.I am using singleton pattern to instantiate class.
add_action( 'plugins_loaded', array(SMARTPOPUP::getInstance(), 'init') );
class SMARTPOPUP
{
private static $instance = null;
public function init(){
add_action('wp_enqueue_scripts', array($this, 'frontEndAssets'));
}
public function frontEndAssets(){
wp_enqueue_style(
'wpsgdprcss',
plugin_dir_url( __FILE__ ) . 'assets/css/styles.css',
array()
);
wp_enqueue_script(
'wpsgdprjs',
plugin_dir_url( __FILE__ ) . 'assets/js/scripts.js',
array(),
false
);
$localizedata = array(
'ajaxurl' => admin_url('admin-ajax.php'),
'noncesecure' => wp_create_nonce(WP_SMART_GDPR_SLUG),
);
wp_localize_script( 'wpsgdprjs', 'wpsgdprdata', $localizedata );
}
public static function getInstance(){
if(!isset(self::$instance)){
self::$instance = new self();
}
return self::$instance;
}
}
try below code
add_action( 'plugins_loaded', array(SMARTPOPUP::getInstance(), 'init') );
class SMARTPOPUP
{
private static $instance = null;
public function init(){
add_action('wp_enqueue_scripts', array($this, 'frontEndAssets'));
}
public function frontEndAssets(){
wp_enqueue_style( 'wpsgdprcss');
wp_register_script('wpsgdprcss',plugin_dir_url( __FILE__ ) . 'assets/css/styles.css',array() );
wp_register_script( 'wpsgdprjs',plugin_dir_url( __FILE__ ) . 'assets/js/scripts.js',array(),false );
wp_enqueue_script( 'wpsgdprjs');
$localizedata = array(
'ajaxurl' => admin_url('admin-ajax.php'),
'noncesecure' => wp_create_nonce(WP_SMART_GDPR_SLUG),
);
wp_localize_script( 'wpsgdprjs', 'wpsgdprdata', $localizedata );
}
public static function getInstance(){
if(!isset(self::$instance)){
self::$instance = new self();
}
return self::$instance;
}
}
function custom_plugin_enqueue() {
wp_enqueue_style( 'wpsgdprcss', plugin_dir_url( __FILE__ ) . 'assets/css/styles.css' );
wp_enqueue_script( 'wpsgdprjs', plugin_dir_url( __FILE__ ) . 'assets/js/scripts.js' );
}
add_action('wp_enqueue_scripts', 'custom_plugin_enqueue');
I thought your code should work, so I tested it. Specifically, I tested the following:
<?php /*
Plugin Name: Junk
*/
add_action( 'plugins_loaded', array(SMARTPOPUP::getInstance(), 'init') );
class SMARTPOPUP
{
private static $instance = null;
public function init(){
add_action('wp_enqueue_scripts', array($this, 'frontEndAssets'));
}
public function frontEndAssets(){
wp_enqueue_style(
'wpsgdprcss',
plugin_dir_url( __FILE__ ) . 'assets/css/styles.css',
array()
);
wp_enqueue_script(
'wpsgdprjs',
plugin_dir_url( __FILE__ ) . 'assets/js/scripts.js',
array(),
false
);
$localizedata = array(
'ajaxurl' => admin_url('admin-ajax.php'),
'noncesecure' => wp_create_nonce('WP_SMART_GDPR_SLUG'),
);
wp_localize_script( 'wpsgdprjs', 'wpsgdprdata', $localizedata );
}
public static function getInstance(){
if(!isset(self::$instance)){
self::$instance = new self();
}
return self::$instance;
}
}
This generated the following style and script elements:
<link rel='stylesheet' id='wpsgdprcss-css' href='http://localhost/wp-content/plugins/junk/assets/css/styles.css?ver=4.9.6' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpsgdprdata = {"ajaxurl":"http:\/\/localhost\/wp-admin\/admin-ajax.php","noncesecure":"8b77af0183"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/junk/assets/js/scripts.js?ver=4.9.6'></script>
The only change I made was I replaced WP_SMART_GDPR_SLUG with 'WP_SMART_GDPR_SLUG' since you probably forgot to include the define for it.
There is nothing wrong with your code itself.
Are you sure that your code is being executed?
I don't think this matters but I am running WordPress Version 4.9.6 using PHP 7.1.17.
Tried many different techniques to get jquery working in my custom wordpress theme but still haven't got anywhere.
I've included two different methods that I've tried below near the end of the code, with one commented out here.
Can anyone see why this code might not be working?
PHP:
<?php
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
function enqueue_stylesheets() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}
/*function wp_enqeue_scripts() {
wp_register_script('navbarScroll', home_url() . '/js/navbarScroll.js', array( 'jquery' ));
wp_enqueue_script('navbarScroll');
//wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}*/
function navbar_script() {
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action('wp_enqueue_scripts', 'enqueue_stylesheets', 'enqueue_scripts', 'navbar_script');
My Test JS (I've used both $ and jquery):
jquery(document).ready(function() {
jquery('#jQueryTest').html('jQuery is Working');
jQuery('nav').hover(function() {
$(this).css('display', 'none');
})
/*var a = $('nav').offset().top;
$(document).scroll(function() {
if ($(this).scrollTop() > a)
{
$(this).removeClass('nav');
$(this).addClass('nav-scrolled');
} else {
$(this).removeClass('nav-scrolled');
}
});*/
});
Well it seems that you have too many parameters in your add_action function.
The add_action should have only 4 arguments as follows:
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
See WordPress documentation for more information.
That's what should be working just fine:
function enqueueScript() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action( 'wp_enqueue_scripts', 'enqueueScript' );
Note that it is not necessary to enqueue style and script separately. One method can do both by using wp_enqueue_scripts.
If you really want to separate your style and script in different function, you should call add_action this way:
add_action('wp_enqueue_scripts','wp_enqueue_scripts');
add_action( 'wp_enqueue_scripts','enqueue_stylesheets');
add_action( 'wp_enqueue_scripts','enqueue_scripts');
add_action( 'wp_enqueue_scripts','navbar_script');
If you want to load jQuery, add it to your function:
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
Its easy if you can have a code like this to solve correctly and without confusiong. You have forgotten to pass add_action for your scripts.
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
function enqueue_stylesheets() {
//For registering Styles
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
//For registering Scripts files
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_stylesheets' );
Hope this works for you.
THanks
So for some reason wp_enqueue_script does not execute when dependent on query string value. If I change function check to simply return true, it works. Why is this? Looking at the WordPress initiation order, wp_enqueue_script fires after parse_query which means it must be available. My goal is to only load the scripts if template foo is requested.
class Car {
public function __construct() {
if ( $this->check() ) {
add_action('template_include', array( $this, 'get_template') );
// Does not work
add_action( 'wp_enqueue_scripts', array( $this, 'get_scripts') );
add_action( 'wp_enqueue_scripts', array( $this, 'get_styles') );
}
// Works
add_action( 'wp_enqueue_scripts', array( $this, 'get_scripts') );
add_action( 'wp_enqueue_scripts', array( $this, 'get_styles') );
}
public function check() {
return ( isset( $_GET['foo'] ) && $_GET['foo'] == true );
}
public function get_template() {
return locate_template( array( 'foo.php' ) );
}
}
$car = new Car();
I suspect that it's ignoring your 'foo' parameter because to use custom query vars, they need to be registered with WordPress, using the 'query_vars' filter.
Like this:
function themeslug_query_vars( $qvars ) {
$qvars[] = 'foo';
return $qvars;
}
add_filter( 'query_vars', 'themeslug_query_vars' , 10, 1 );
In my theme header.php i added:
<?php wp_enqueue_script("jquery"); ?>
And try to use jquery in functions.php:
function remove_xprofile_links() {
remove_filter( 'bp_get_the_profile_field_value', 'xprofile_filter_link_profile_data', 9, 2 );
global $current_user;
get_currentuserinfo();
$user_id = $current_user->ID;
$field = xprofile_get_field_data(3, $user_id);
if($field="Покупатель")
{
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$("#nickname,#display_name").parent().parent().hide();
});
</script>
<?php
}
}
add_action( 'bp_init', 'remove_xprofile_links' );
But in console still ReferenceError: jQuery is not defined
How to use jquery correctly?
Probably you added the wp_enqueue_script line in your header.php after the wp_head() function has already been executed, but that's not the real issue.
The problem is that you shouldn't enqueue your scripts in header.php, but in your theme's functions.php file, adding an action to the wp_enqueue_scripts hook, like explained in this example:
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
In your case this should be enough:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
} );
I have a query to get a post in wordpress:
<?php
$page_content = get_page(2);
echo do_shortcode($page_content->post_content);
?>
The page that is being loaded has a shortcode in it that loads a slider. The slider markup is loading but the javascript and css files required for the plugin are not showing up in the source code. How can I fix this?
you did not supply any relative source code or link, but did you load the JS and css ?
Is the slider comes from a plugin ? is it your plugin ? is the plugin activated for said page ? did you enqueue your styles and scripts ??
Anyhow, as a first measure , try to load it manually on the page
function my_scripts_enq()
{
// Register the script for a plugin:
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
// or
// Register the script for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
// then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
For fast debug you can can simply try :
if( is_page(42) ){
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
}
for styles you should do :
function load_styles()
{
// Register the style for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// or
// Register the style for a theme:
wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), 'se16205117', 'all' );
// then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'load_styles' );
BTW - as a side note , From codex
$page_id = 2;
$page_data = get_page( $page_id );
// You must pass in a variable to the get_page function. If you pass
in a value (e.g. get_page ( 123 ); ), WordPress will generate an
error. By default, this will return an object.