Adding wordpress web template with different styles and js - javascript

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.

Related

how to add custom javascript in wordpress child theme

I have avada theme, and I created child theme, how to add my custom js file in child theme.
I tried using this video tutorial, but without success
https://www.youtube.com/watch?v=4xbvhXj72kU
Can you help me!
Here is best way to include custom js in child theme:
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
You can use the wp_enqueue_script() function.
documentation: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
This function allows you to load scripts at any given time.
Create a folder in child theme and upload your JS file to that folder.
You can include a js file using
wp_enqueue_script()
or you can use
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/filename.js" type="text/javascript"></script>
add the above code in theme header.php or footer.php

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>

Javascript in Wordpress widget works only on Home page

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?

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!

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