Adding Javascript Sly to Wordpress - wordpress

Is there a way to get "sly" (this javascript plugin: http://darsa.in/sly/) in a Wordpress site? I really like it but i can't find the way to put it in a wordpress site. Or maybe do you know something very similar?

you can download your script.js .Put your script.js into your js file of your theme folder and then you can enqueue your js file like this:
function new_scripts() {
wp_register_script('my_new_script', get_template_directory_uri() . '/js/new_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_new_script');
}
add_action( 'wp_enqueue_scripts', 'new_scripts' );
You can read more here : https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Related

wp_enqueue_script only on certain page templates

I am doing this in a plugin. I have the following in an attempt to only enqueue a script when my template file archive-my_custom_post_type.php is used.
add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue($hook) {
if(is_page_template('archive-my_custom_post_type')){
wp_enqueue_script( 'ajax-scripts', plugins_url( '/js/myjquery.js', __FILE__ ), array('jquery') );
}
}
It is not working. It does not load the jquery file on ANY front-end pages, let alone when archive-my_custom_post_type.php is rendered. However, when I remove that if conditional, it loads on ALL my front-end pages.
Question: How can I do a conditional enqueue of a script whenever my custom post type archive template is being used?
You need to use the complete file name, including .php. So in your case you will need to use:
is_page_template('archive-my_custom_post_type.php')
Also, if your template is under a subdirectory you will need to specify that as well.
Ref: https://developer.wordpress.org/reference/functions/is_page_template/#more-information
If you're using is_page_template function, you should also use as parameter the full path (including subdirectories) for the template. For example, if your template is located in your-theme-directory/templates/template-file.php then you should use it like this:
if(is_page_template('templates/template-file.php')){
wp_enqueue_script( 'ajax-scripts', plugins_url( '/js/myjquery.js', __FILE__ ), array('jquery') );
}

Custom style sheet tag in wordpress

I'd like to custom stylesheet code in wordpress.
global $is_chrome;
if($is_chrome){
add_filter("style_loader_tag", function($tag){
return str_replace("rel='stylesheet' " ,"rel='preload' as='style' onload=\"this.rel='stylesheet'\" ", $tag);
});
}
but this is effectable for css in asset folder.
this is not good for [themes > mytheme > ooo.css].
how can i get through this.
thankyou in advance.
Enqueueing styles is the proper way to add a style sheet in WordPress
Paste the below code in functions.php and change path and filename.css to your path and filename
function themename_enqueue_style() {
wp_enqueue_style( 'customCSS', get_template_directory_uri() . '/path/filename.css' );
}
add_action( 'wp_enqueue_scripts', 'themename_enqueue_style' );
get_template_directory_uri() prints the template directory link.
Example:
www.example.com/wp-content/themes/themename

functions.php file doesn't work in wordpress

I am creating a theme by myself in wordpress. But suddenly my functions.php file stop to work. I am enqueuing a stylesheet file. First time it worked. But now its not working. whats wrong with it? (I am new in wordpress) My code is
<?php
function get_external_files(){
wp_enqueue_style('style', 'get_stylesheet_uri()');
}
add_action('wp_enqueue_scripts', 'get_external_files');
You've put get_stylesheet_uri() inside quotes '' turning it into a string instead of a function call... This should work:
<?php
function get_external_files(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'get_external_files');

Adding stylesheet in WordPress

I would like to ask why my stylesheet is not showing on the page source of the webpage. Please see the code below, that's the code in my functions.php.
`function theme_styles() {
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme-styles' );`
I believe I have entered the code correctly but whenever I right click on the webpage and look for the source code, my stylesheet is not showing. I am using WebMatrix by the way and my style.css is under the themes folder that I am currently working on. I am new in WordPress and I'm trying to create my own custom theme. Any help will be highly appreciated.
Thank you so much,
Gilbert Jacob
Try This :
wp_enqueue_style( 'themename-style', get_stylesheet_uri() );
Try this:
function my_theme_load_resources() {
$theme_uri = get_template_directory_uri();
wp_register_style('style_css', $theme_uri.'/style.css', false, '0.1');
wp_enqueue_style('style_css');
}
add_action('wp_enqueue_scripts', 'my_theme_load_resources');
Never mind, I noticed that my theme_styles is using an underscore and the one I use in action is theme-styles. Thanks!

what to do after registering and enqueing a css file inside a plugin folder to use it

I have been looking for an answer for this in SOF but didn't find a clear answer
I have a plugin that forces pages to be shown when certain conditions are met. but when i try to include css files for styling i get no response .
I tried to include the file using normal html and this was a failure
then tried the wp_register_style and wp_enqueue_style as such:
function rw_add_style(){
$rw_path = plugins_url('kawaleb/style.css');
wp_register_style('testili',plugins_url('kawaleb/style.css'));
wp_enqueue_style( 'testili' );
}
add_action ('wp_enqueue_scripts','rw_add_style');
wp_enqueue_style( 'testili' );
}
I placed this code on the page that should be shown when the conditions are met
What I don't know here is how to procede after enqueing !
do I need to use html to include the stylesheet file ( and then what is the use of enqueing ?) or does it do that by itself (and then what I am missing here ? )
In the doc of codex they dont go further than telling you to register the style then enqueue it !!!
Thank you all :)
You don't need to register the style, you can just enqueue it. Also, you mentioned that you've put the code in the file where you'd like it to display, you should put it in the index file of your plugin, so in /your-plugin/index.php or whatever the main file is called, add this code:
function rw_add_style() {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
If you need it only on a certain page then you should add your conditional within the function, so you could do this for example:
function rw_add_style() {
global $post;
if ( $post->post_name == 'post_name' ) {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
And you can work out what the post name is for the page you need to enqueue it for by temporarily adding the following code to the page template:
global $post;
echo $post->post_name;
To be clear, you don't need to add any html <link> to include the CSS as you're right, there would be no point in enqueuing it then. Just add the enqueue as I described above in the main index file of your plugin and it will be automatically included in the wp_head() in your header and output just before the </head>.
I hope this helps. Good luck. =)

Resources