I don't know why I'm having this issue. I'm new to wordpress and I am following along with a 'freecodecamp' tutorial(youtube) on how to make a custom wordpress theme from scratch.
In the video, the instructor is enqueueing his style sheet using the functions.php file. Here is the exact code he is using...
Click here for code image
<?php
function followandrew_register_style() {
wp_enqueue_style('followandrew-bootstrap', get_template_directory_uri() . "/style.css", array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'followandrew_register_style' );
?>
Click here for error image
Visual Studios is prompting this error as soon as I write out the commands...
"Undefined function 'wp_enqueue_style', and undefined function 'add_action'.
I am including "wp_head()" inside my front-page.php to output the stylesheet.
Everything else is working fine. I am able to see my basic html setup when posting in inside the "front-page.php". My wordpress is connected correctly and I have access to the backend admin.
If I hardcode the path to the style sheet inside of front-page.php, it works fine.
So basically, any functions or commands I try to run inside the functions.php file are coming back undefined!
Nevermind, it looks like everything is working fine. I just had the wrong source path for the custom css link.
VS code is still displaying the undefined error but everything is working.
Best 5 hours Ive ever wasted :)
Related
I'm bursting my brains out. I just can't figure out why my custom stylesheets/scripts won't load.
The stylesheet/scripts are properly enqueued (see below) but for some reason, if I load the stylesheet on my browser, or check in the browser console. it would return a 404
enqueued via
wp_enqueue_style('libraries', get_template_directory_uri() . '/assets/build/css/libraries.css');
wp_enqueue_style('site', get_template_directory_uri() . '/assets/build/css/site.css');
I have also checked file permissions, and theme and file folders are set to 770.
What do you think is the issue?
Try with get_theme_file_uri() like this:
wp_enqueue_style ( 'site', get_theme_file_uri('/assets/build/css/site.css'), ... );
Here the link to the documentation of this function:
https://developer.wordpress.org/reference/functions/get_theme_file_uri/
I developed my WP WooCommerce shop locally with XAMPP and finally got around to upload my site.
1) How do you make edits to your CSS when the site is live and online?
Do you use Appearance > Theme Editor to make changes to your style.css file that is saved in your child theme or is there a plugin that is "better" than the default one?
Is there a shortcut for commenting lines out?
Or do you have an identical version locally that is synced to the uploaded version and do the edits locallly and upload the final edited style.css file?
I'm not sure what the best workflow is.
2) I find myself making changes and nothing happens on the live site. Do I have to clear the cache and than login again to get into my WP dashboard? Seems very tedious... I searched the forum and found that you can do something with this line
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
can someone elaborate how and where to use it? does it go into the functions file?
Use this line your functions.php
function yourthemename_style_nscripts(){
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
}
add_action('wp_enqueue_scripts', 'yourthemename_style_nscripts');
otherwise,
open your functions.php then find your yourthemename_style_nscripts function then paste it.
In Wordpres, I have created a plugin. I'm trying to use Bootstrap/bootstrap-select in order to create a multi-select (with checkboxes) on a custom page template, but I'm having problems. I'm not creating a new theme, but I am using a child theme. Here is what I've done:
Copied page.php from the parent theme to the child and renamed it to manage-matches.php
Edited the template and added
Template Name: manage matches
Created a new page and selected this new template
In the template loop content div, I call another PHP file using:
This function is in managematches.php and I've
I copied my header.php to the child and added the references to the bootstrap.css and the bootstrap-select.css
I've done
include_once 'includes/managematches.php';
in my plugin.
This function managematches() generates the html for my page and it works fine. In fact, I can create bootstrap elements so I know the bootstrap/bootstrap-select.css files are working. I've also created a .js file (managematches.js) and enqueued it and that is working. By working, I mean that standard jQuery functions and selectors work fine.
The problem is that I can't get any of the functions in bootstrap-select.js to work. I've tried putting the reference to it in a whole bunch of places, to no avail. I keep getting:
TypeError: $(...).selectpicker is not a function
The problem is described here: Bootstrap-select not working
and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.
What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.
ANSWER
I enqueued the css and js in my plugin, but the functions.php would work too.
wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
wp_enqueue_style( 'bootstrap-select', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css');
wp_enqueue_script( 'bootstrapjs', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'bootstrap-selectjs', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js', array('jquery'), '', true );
The problem is described here: Bootstrap-select not working and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.
What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.
I guess your javascript files are loaded either in the header.php or the footer.php on the main theme. Of course they can also be included in functions.php. You can inspect the source code of the generated page and check in which point is your bootstrap-select included and then search the name of the file on your theme's source code.
How did you enqueue your managematches.js?
By using wp_enqueue_script you can also declare dependecies of the enqueued script.
So, I've built my own theme for wordpress. Now, I'm trying to put my own plug-in on that theme which requires 3 javascript files. Upon reading the WP-Codex, it tells me the wp_register_script, wp_enqueue_script and add_action methods are the best way to go.
Now, in my plug-in file, I've done things such as:
function register_my_scripts() {
wp_register_script('script-1', plugins_url('path/to/script-1.js'), array('jquery'));
wp_register_script('script-2', plugins_url('path/to/script-2.js'));
wp_enqueue_script('script-1');
wp_enqueue_script('script-2');
}
add_action('wp_enqueue_scripts', 'register_my_scripts');
Nothing seems to show up on any of my template pages. I've even put this code on the main index page and still nothing. I've written something simple, straight from the codex like: wp_enqueue_script('jquery') on the page and still nothing shows up. Is there something I'm missing here? Why won't html for loading the scripts show up on my page?
Also, I'm running Wordpress 3.5.2
I enqueue my scripts like this on the functions.php file:
PHP
wp_enqueue_script ('customjs', '/wp-content/themes/blackboard/js/custom.js','','',true);
Please remember that the usage is:
<?php wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); ?>
Try putting the wp_enqueue_script() on your functions.php just as a test. Please check that your path is correct too and check the source code to see if it's printing but just with a wrong path.
Note that the first line of code on this answer is the only thing I need to enqueue the script, nothing else as far as I know.
Let us know if this works for you, cheers.
I am trying to get my custom javascript (jQuery) to load correctly in Wordpress.
I know you have to use wp_enqueue_script() to do this correctly. However the problem I have is that the result is not my script, but in the place I should have javascript I have the code for a 404 page !
I've tried two ways of enqueueing the script :
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),1);
just above wp_head()
and :function my_script_load() {
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),null);
}
add_action('init', 'my_script_load');
in functions.php
both methods have the same effect. When I inspect the HTML in firebug I find the script is corredtly referenced :
<script src="http://localhost/wordpress/wp-content/themes/doric2011/javascript/sitescript.js" type="text/javascript">
however when I inspect the script itself I find the following (an extract) :`
Page not found | Nick Kai Nielsen
and so on... It is a HTML output for a 404 page, but occupying a space where javascript should be...
Needless to say the script does not work.
I have only had this problem since updating to 3.1 and it does the same thing if I try loading highslide.js and highslide.config.js (professionally written scripts). The script I wish to load is already working on my site and I want to go on using it in the new theme I am developing.
has anyone any idea of what is happening ? And, of course, what should I do about it ?
This is a local installation - I'm not risking breaking my site until this is sorted out.
Try:
add_action('init', 'my_script_load');
function my_script_load() {
wp_register_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'), true);
wp_enqueue_script('sitescript');
}
Assuming your javascript file is in the proper location (and the URL isn't pointing to a spot where the JS file isn't...) try this:
function add_my_scripts() {
$templatedir = get_bloginfo('template_directory');
if(!is_admin()) {
wp_register_script( 'sitescript', $templatedir . '/javascript/sitescript.js');
wp_enqueue_script( 'sitescript' );
}
}
add_action( 'init', 'add_my_scripts');