Add js in wordpress pages except some of them? - javascript

I wrote a code to add a js to specific pages in wordpress. but if I want to:
1- run the code in specific pages how can I change the code?
2- or run the code in everywhere except in some page IDs?
how can I cahnge that?
thanks in advance to everyone! :D
function wpb_hook_javascript() {
if (is_page ('727')) {
?>
<script type="text/javascript">
my script
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

I think this would be as easy as
function wpb_hook_javascript() {
if (!is_page(array('the', 'excepted', 'pages'))) {
wp_enqueue_script('script_name', 'script_path.js')
}
}
add_action( 'wp_enqueue_scripts', 'wpb_hook_javascript' );
I used wp_enqueue_script because I like it more, but obviously you can stay with injecting it into the head directly, depending on what it does.
Edit: Pretty sure it would work like this:
add_action( 'wp_head', function() {
if (!is_page(array('the', 'excepted', 'pages'))) {
?>
<script type="text/javascript">
my script
</script>
<?php
}
}
Compare logical operators in php, is_page, arrays in php and wp_enqueue_script.

Related

How to include a script if element has a class?

Let's say I have:
<body class="hello">
How can we do something like the following?
if($("body").hasClass("hello")) {
<script src="/demo_js/ion.rangeSlider.min.js"></script>
}
I was wondering if maybe doing something like:
if($("body").hasClass("hello")) {
document.write('<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></'+'script>');
}
That looks fine but it's a mixup of jQuery and JS and I am not sure if that's the correct way anyway.
It'd be even better if this could be done via the backend in php but I am not sure how to check if an element has a class in php neither how to tell it to include a script if it does.
How would you approach it?
One trick in php I thought is the following but then again, is there any better way?
<?php
$hello = "hello";
if($hello) { ?>
<script...
<?php } ?>
<body class="<?php echo $hello; ?>">
The jQuery function for this is $.getScript.
https://api.jquery.com/jQuery.getScript/
$.getScript( "/demo_js/ion.rangeSlider.min.js" )

Including typed.js in wordpress

I have been trying to add a typed.js plugin to one of the wordpress themes.
I put the typed.js in the "js" folder in the theme folder.
Then I edited the functions.php in the theme folder and added:
function typed_script_init() {
wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js');
}
add_action('wp_enqueue_scripts', 'typed_script_init');
add_action('wp_enqueue_scripts', 'typed_init_in_footer');
function typed_init_in_footer() {
add_action('print_footer_scripts', 'typed_init');
}
function typed_init() { ?>
<script type="text/javascript">
$(function(){
$("#typed").typed({
strings: ["Are you Interested?"],
typeSpeed: 20
});
});
</script>
<?php }
I do have in one of my section in the theme:
<h1>
<span id="typed"></span>
</h1>
And when I launch my wordpress page it does not work.
I have been sitting on this for almost 3hours reading online tutorials about including javascript in wordpress and still nothing.
Is there anybody who can help me?
Thanks guys!
The proper way to do this would be to (1) include jQuery as a dependency (you haven't mentioned if you've included jQuery), (2) use noConflict wrappers:
function typed_script_init() {
wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'typed_script_init');
function typed_init() {
echo '<script type="text/javascript">
(function($){
// The `$` jQuery shortcut is now available to you
$(function(){
$("#typed").typed({
strings: ["Are you Interested?"],
typeSpeed: 20
});
});
})(jQuery);
</script>';
}
add_action('wp_footer', 'typed_init');
I've added the scripts to the wp_footer action hook...but it may be preferable to put those scripts in an external JS file, and also enqueue them in wp_enqueue_scripts, with typedJS as a dependency.

JavaScript not works in codeigniter?

I have a codeigniter project, where I want to use some js.
I have file with my js:
<script type='text/javascript' src='/utilities/assets/js/main.js'> and jquery
<script type='text/javascript' src='/utilities/assets/js/jquery.js'>
The both are availaible from my site, I can look it's content.
I have such code at main.js
$(document).ready(function ()
{
alert('Javascipt works');
}
When I load page, nothing happens.
I tried load javascript class of codeigniter, but when I tried in my view:
<?php echo $library_src;?>
<?php echo $script_head;?>
It says that that libraries are undefined. How can I use js there?
You are missing ); at the end. The function is never closed.
Try
$(document).ready(function ()
{
alert('Javascipt works');
});
instead of
$(document).ready(function ()
{
alert('Javascipt works');
}

wp functions.php flexslider settings

So, I'm a novice at WordPress. I've got this in functions.php which loads the script on every page that gets the footer:
// flexslider custom settings
add_action('wp_footer', 'aplace_flexslider_settings');
function aplace_flexslider_settings() {
?>
<script>
jQuery(document).ready(function($){
  $('.flexslider').flexslider();
});
</script>
Is there a way to customized this so that its called only on the static front page? For example, can I make a custom hook that I'd add_action to and then just get_customHook on the front page? That would disassociate it with the footer, right? I'm so confused...
Just wrap your function in an if statement:
function aplace_flexslider_settings() {
if(is_front_page()) { ?>
<script>
jQuery(document).ready(function($){
$('.flexslider').flexslider();
});
</script>
<?php } } ?>

How do I put jQuery code in an external file in WordPress theme?

I am relatively new to Javascript/jQuery so please bear with me.
I'm designing a custom WordPress theme and I have been using jQuery to make some changes to the main navigation menu that is generated in my header file (header.php). I have been adding code like this inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
</script>
My question is simple really. My scripts have gotten so long that I want to move them to their own file (perhaps nav-mouse-events.js) and call them from within header.php. How do I do this? Is it as simple as putting the code inbetween the second script tags into a file named nav-mouse-events.js and then adding this to the head tag?
<script src="nav-mouse-events.js"></script>
Or do I need to do something more complicated? Do I need to call jQuery from the new external file or header.php?
You would put the scripts in a .js file and use wp_enqueue_script in functions.php to include them the proper way.
From the wordpress site:
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
Add this line:
<script src="<?php echo get_bloginfo('template_url ');?>/nav-mouse-events.js"></script>
and save nav-mouse-events.js file with code:
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
in your template folder.

Categories