Javascript in Wordpress widget works only on Home page - javascript

I would like to use my widget in every pages, but that works only on home page.
I'm still in local for the moment. I'm writing my script in footer.php before the end of body like that :
<script type="text/javascript" src="wp-content/themes/twentyfourteen/js/formlist.js"></script>
I've seen that when I'm not on home page, when I inspect with developper tools, my script .js is red and not well imported. How can I make that ?

You have to correctly enqueue your Javascript in your theme, i.e. something like this:
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' );
There are other methods, depending on if your script uses the main jQuery library and other considerations. See Function Reference/wp enqueue script « WordPress Codex for information on all the ways to use wp_enqueue_style.
And use your Dev Tools to check for errors and correct loading.

Try calling your script like this:
<script src="<?php echo get_template_directory_uri();?>/js/formlist.js"></script>
If you are on your home page, wp-content/themes/twentyfourteen... may work just fine. But say you're on yoursite.com/about then it thinks the URL for the javascript file is yoursite.com/about/wp-content/themes/twentyfourteen...
Make sense?

Related

how to load unique script in wordpress custome plugin

i want to add unique script if script file already there its not been added
i have used following js file
jquery.min.js
slick.min.js
custome.js
but jquery.min.js have conflict with already added by wordpress and when i remove this js file than$not define error come so can i resolve this
My code is here
wp_register_script('jquery_js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js');
// wp_register_script('jquery', plugins_url('js/jquery.min.js', __FILE__),array(),null,true );
wp_enqueue_script('jquery_js');
wp_register_script('slick', plugins_url('js/slick.min.js', __FILE__), array('jquery_js'));
wp_enqueue_script('slick');
wp_register_script('custome', plugins_url('js/custome.js', __FILE__), array('jquery_js'),null,true);
wp_localize_script('custome','ajax_object',array(
"ajax_url" => admin_url("admin-ajax.php"),
"base_url" => esc_url( plugins_url( 'img', __FILE__ ) )
));
wp_enqueue_script('custome');
What you can try is first to deregister the jquery that comes with WP and then register the new one. I would also recommend you to actually download your jquery.js, instead of trying to load it through CDN. So your function would look something like:
wp_register_script(
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery-3.2.1.min', get_theme_root_uri() . '/my_theme_folder/path_to_jquery/jquery-3.2.1.min.js', true);
//and so on
//and so on
);
wp_enqueue_script('custome');

Wordpress script not loading

I am having a wordpress website and some custom javascript. However my goal is to load this javascript file the right away as wordpress is suggesting it. Somehow this is not working or I am doing something wrong.
The file is called FormScript.js and is located here:
/httpdocs/wp-content/themes/Avada/FormScript.js
In the same directory is my function.php, in which I want to load the script.
This is how I am doing it:
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
// Register and Enqueue a Script
// get_stylesheet_directory_uri will look up child theme location
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . 'FormScript.js');
wp_enqueue_script( 'FormScript' );
}
But why is this not working? Thanks for help...
You are missing a / after get_stylesheet_directory_uri() inside wp_register_script.
It should be:
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . '/FormScript.js');
Edit:
From the documentation:
Note: Does not contain a trailing slash.
why don't you open the header.php file and use a simple script tag to load the FormScript.js file?
/httpdocs/wp-content/themes/Avada/FormScript.js
/httpdocs/js/FormScript.js
http://www.domain.com/js/FormScript.js
make sure your js file is world accessible
<script type="text/javascript" src="http://www.domain.com/js/FormScript.js"></script>

Adding wordpress web template with different styles and js

I have to make a new homepage on a wordpress website and the new homepage must be with different css and javascript than the css and js of the theme. I have created a page template with the new layout but I found it difficult to include the styles and js and I have started to wandering if this is the wright way. What I have done is to create a new page template with everything in it with a separate head tag where i will include the styles, but I couldn`t find out how to set the path to the files properly. I have to add bootstrap css as well and 4 js files and the new files should not affect the other pages of the website.
Also I have to add a slider on which should be a text which have to be editable from the administration panel. Do I have to make it with a plugin because I was given html and css files and the slider is made with javascript, and I have to use those files.
Can anyone give an advice which is the wright way to make the new page?
You can approach this by using is_page() or is_home() or is_front_page() to determine homepage, then use wp_dequeue_style(), wp_enqueue_style(), wp_dequeue_script(), wp_enqueue_script() to remove/add style and js files to your needs
Depending on how your theme is built you can put if statements in the header to include the appropriate css/js files.
You can do the following -
<?php if(is_front_page()):?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/homestyle.css">
<script src="<?php bloginfo('template_directory');?>/js/homescripts.js"></script>
<?php else: ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/regularstyle.css">
<script src="<?php bloginfo('template_directory'); ?>/js/regularscripts.js"></script>
<?php endif;?>
The slider question is harder to answer without specifics. There are many slider plugins available in the repo that you can add with shortcodes or php codes, but you can also use a regular jQuery slider.
You can accomplish what you want by creating a new template with a second header as you have described. You mentioned that the only problem you had was with trying to set up the file path, I think you mean calling the new header in your template. Here's what you do...
Copy the homepage template and name it something else (I think you have already done this)
Copy the header file and rename it from i.e. header.php to header-home.php
Call the header in your template with <?php get_header( $header-home ); ?>
Edit the new header-home.php with your new css and js file.
That's it! The home template will now use a custom header.
In regards to the slider as Codebloo has said, there are many free slider plugins available but I recommend Slider Revolution. All you do is install it like any other plugin and you are ready to set up your slides. When you have created your slides you are given a shortcode or a php insert that you can use on any page, post, or template.
Okay, you have your template. Next you need to enqueue styles and scripts in your functions.php or wherever you enqueue your assets based on whether you're showing that template or not.
This can easily be done like so:
function assets() {
$assets = array(
'bootstrap-css' => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
'bootstrap-js' => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js',
'css' => '/assets/css/main.min.css',
'js' => '/assets/js/main.min.js',
'home-css' => '/different-assets-path/css/main.min.css',
'home-js' => '/different-assets-path/js/main.min.js',
);
// enqueue common assets here
wp_enqueue_style( 'bootstrap_css', $assets['bootstrap-css'], false, null );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'bootstrap_js', $assets['bootstrap-js'], array(), null, true );
if ( is_page_template( 'templates/home.php' ) ) {
wp_enqueue_style( 'home_css', get_template_directory_uri() . $assets['home-css'], false, null );
wp_enqueue_script( 'home_js', get_template_directory_uri() . $assets['home-js'], array(), null, true );
} else {
wp_enqueue_style( 'main_css', get_template_directory_uri() . $assets['css'], false, null );
wp_enqueue_script( 'main_js', get_template_directory_uri() . $assets['js'], array(), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'assets', 100 );
Regarding adding a slider that's editable from the admin interface. I like to use Advanced Custom Fields to create editable content areas which I then display on the front-end like any other content. This way you're not tied to any particular slider plugin and can change out the javascript and markup to display the slider as you choose.

Using David J Bradshaw's iframe-resizer

I have a Teamspeak status viewing script hosted on a different domain than my wordpress. So I'm trying to show the script results in a text/html widget using an iframe except it will not auto-size the height. Wordpress is on shared hosting so this script will not communicate with my teamspeak server from there. I cannot find any other ts3 viewers that work while auto-hide empty channels and not completely ugly. After doing some research I came across what appears to be the latest and greatest solution, David J Bradshaw's iframe-resizer. Now I'm no expert on the subject and don't completely understand how I should set this up properly.
Currently my wordpress widget reads like this:
<iframe src="http://66.172.12.238/ts3.php" width="100%" scrolling="no"></iframe>
ts3.php reads like this:
<html>
<head>
<title>TSStatus</title>
<link rel="stylesheet" type="text/css" href="/ts3/tsstatus.css" />
<script type="text/javascript" src="/ts3/tsstatus.js"></script>
</head>
<body>
<?php
require_once("/var/www/ts3/tsstatus.php");
$tsstatus = new TSStatus("ts3.greatarchitect.us", 10011);
$tsstatus->useServerPort(9987);
$tsstatus->imagePath = "/ts3/img/";
$tsstatus->timeout = 2;
$tsstatus->hideEmptyChannels = true;
$tsstatus->hideParentChannels = true;
$tsstatus->showNicknameBox = false;
$tsstatus->showPasswordBox = false;
echo $tsstatus->render();
?>
</body>
</html>
and that's pretty much all I have right now. I was hoping someone could help me properly install/setup this iframe-resizer.
Thank you.
It looks like you need to add a js file to your http://66.172.12.238/ts3.php
See fiddle here of your page and the example of the plugin page.
You need to add this js file:
<script type="text/javascript" src="http://davidjbradshaw.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
I dont know if you have any knowledge on how to load extra js files to Wordpress. If not, read here http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Adding js files to Wordpress
I would add this to a js file on it's own to execute the resizer, I'll name it iframe.js:
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
});
Add this to your functions.php file of your theme:
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframeResizer.min.js ', array(), '1.0.0', true );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframe.js ', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
Make sure you add the iframeResizer.min.js and iframe.js in your themefolder/js/ folder.
You can edit the iframe.js script as you dont need the extra options for the plugin!

foundation javascript for a wordpress theme

I am trying to create a theme from scratch using the foundation framework which it works great out of the box, but when I need to include the foundation JavaScript scripts, it shows as if they've been loaded, but nothing working, first the top bar doesn't work, I have tried to unregister the jquery which comes pre-loaded with WordPress and use the one from Google cdn as I have read that's a sure way for the top-bar and other scripts to work, but nothing so far works
here is my code in the functions.php
// Enqueue scripts essential for foundation framework to act responsive
function responsive_scripts_basic()
{
//register scripts for our theme
wp_deregister_script('jquery');
wp_register_script('foundation-mod', get_template_directory_uri() . '/javascripts/vendor/custom.modernizer.js',
true );
wp_register_script('foundation-topbar', get_template_directory_uri() . '/javascripts/foundation/foundation.topbar.js',
true );
wp_register_script('foundation-main', get_template_directory_uri() . '/javascripts/foundation/foundation.js',
true );
wp_register_script('zepto', get_template_directory_uri() . '/javascripts/vendor/zepto.js',
true );
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
true );
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'foundation-topbar' );
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'zepto');
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic' );
I have used the same method for the stylesheets, and no problem at all, any experience on this? I thought it was going to be easy to build a theme with this framework, but it's getting rather complicated to be fair.
Well the order in which the js files are "enqueued" is very important.
First you do "enqueue" the modernizer, then jQuery/zepto, then Foundation.min.js and then the topbar extension:
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'foundation-topbar' );
Please see the zurb Foundation Installation docs, with the order of the scripts in mind.
Also to get the foundation thing started, you need a script element most likely at the very end of your PHP produced HTML:
<script type="text/javascript">
$(document).foundation();
</script>
As wordpress is (as I know) pushing jQuery into noConflict mode, you may have to write this like
<script type="text/javascript">
jQuery(document).foundation();
</script>
EDIT: Zepto has no noConflict function, leaving $ being jQuery or whatever it was set. To keep it simple, choose jQuery and use the fully qualified jQuery(document).foundation() syntax!

Categories