I have a page template that needs jQuery loaded in the header instead of the footer.
The Theme (Divi Theme) loads jQuery in the footer by default. This causes some errors, when jQuery is loaded twice.
Is there any way I can modify <?php wp_footer(); ?> to exclude jQuery for this template?
Thanks.
Template:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo get_site_url(); ?>/cam-forms/styles/cam-forms.min.css" />
<script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery-migrate.min.js"></script>
</head>
<body>
<?php echo do_shortcode( get_field('form') ); ?>
<?php wp_footer(); ?>
</body>
</html>
You have to add <?php wp_head(); ?> in the following place:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo get_site_url(); ?>/cam-forms/styles/cam-forms.min.css" />
<script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo get_site_url(); ?>/cam-forms/js/jquery-migrate.min.js"></script>
<?php wp_head(): ?>
</head>
<body>
<?php echo do_shortcode( get_field('form') ); ?>
<?php wp_footer(); ?>
</body>
</html>
Then, in you file functions.php add this..
function theme_scripts(){
wp_register_script('fileName', get_template_directory_uri() . '/js/file.js', array( ), '1.0.0');
wp_enqueue_script('fileName');
}
add_action('init', 'theme_scripts');
Also I always suggest you to work with the minified files for CSS and JS.
add below function in function.php for add js and css file in header and remove file in footer
<?php
remove_action('wp_footer', 'wp_enqueue_scripts', 1);
add_action('wp_head', 'wp_enqueue_scripts', 5);
function mycustomscript_enqueue() {
wp_enqueue_style( 'ca-forms-min', get_template_directory_uri() . '/cam-forms/styles/cam-forms.min.css', array('ca-forms-min'));
wp_enqueue_script( 'jquery', get_stylesheet_directory_uri() . '/cam-forms/js/jquery.js', array( 'jquery' ));
wp_enqueue_script( 'jquery-migrate', get_stylesheet_directory_uri() . '/cam-forms/js/jquery-migrate.min.js', array( 'jquery-migrate' ));
}
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );
?>
Related
I'm beginner for developing the website. Would someone help me to solve these problems? The directory for the file is correct but don't know why I'm still getting the error. Wordpress cannot load the CSS file as well as the JavaScript.
I have used two techniques but still cannot work which can be shown as below:
Anyone can teach me why I cannot load CSS file and Javascript file although using these techniques.
First Technique that I used is <?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?>
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="<?php bloginfo('template_directory');?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
</head>
Second Technique that I used is wp_enqueue_script and wp_enqueue_style
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<?wp_head();?>
</head>
Footer.php
...
<?php wp_footer();?>
</body>
</html>
Functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('abs',get_template_directory_uri().'/css/font-awesome.min.css',array(),'1.0.0','all');
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css',array(),'1.0.0','all');
wp_enqueue_style('normali_css', get_template_directory_uri().'/css/style-1000px.css',array(),'1.0.0','all');
wp_enqueue_style('normalze1_css', get_template_directory_uri().'/css/style-mobile.css',array(),'1.0.0','all');
wp_enqueue_style('normalze_css', get_template_directory_uri().'/css/style-desktop.css',array(),'1.0.0','all');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css',array(),'1.0.0','all');
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array(),'1.0.0', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array(), '1.0.0', true );
wp_enqueue_style('abs');
wp_enqueue_style('foundation_css');
wp_enqueue_style('normali_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_script('modernizr_js');
wp_enqueue_script('foundation_js');
wp_enqueue_script('normalze1_css');
wp_enqueue_script('normalze_css');
wp_enqueue_script('main_css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
?>
error
File Directory
When I view the source
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel-layers.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/momentum/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/skel.css" />
that means the URL is correct
i use the following configuration:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
...
...
...
<link href="<?php echo get_bloginfo('template_url'); ?>/css/mycss.css" rel="stylesheet">
<script src="<?php echo get_bloginfo('template_url'); ?>/js/myjs.js"></script>
...
...
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<div class="myheader">
...
...
</div>
index.php (or page.php, single.php, etc...)
<?php get_header(); ?>
<div class="mycontainer">
....
....
....
</div>
<?php get_footer(); ?>
footer.php
<div class="myfooter">
...
...
...
</div>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
</body>
</html>
im not using anything in functions.php to do this, just in the required files
I am trying to integrate prettyPhoto into my Wordpress theme (i'm using the Sydney theme). I have done the following:
uploaded the prettyPhoto.css file into the /css directory
uploaded the jquery-1.3.2.min.js and jquery.prettyPhoto.js files into the /js directory
uploaded all of the image folders (fullscreen, prettyPhoto, thumbails) into the /images directory
then, I added
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
to the header.php file, right after the opening tag, like this:
?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) : ?>
<?php if ( get_theme_mod('site_favicon') ) : ?>
<link rel="shortcut icon" href="<?php echo esc_url(get_theme_mod('site_favicon')); ?>" />
<?php endif; ?>
<?php endif; ?>
<?php wp_head(); ?>
<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue3 = $("#input").val();
});
});
</script>
-->
</head>
then, to initialize prettyPhoto, I added
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
into the footer.php file, right before the closing tag, like this:
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the #content div and all content after
*
* #package Sydney
*/
?>
</div>
</div>
</div><!-- #content -->
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<?php get_sidebar('footer'); ?>
<?php endif; ?>
<a class="go-top"><i class="fa fa-angle-up"></i></a>
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info container">
<?php printf( __( 'Proudly powered by %s', 'sydney' ), 'WordPress' ); ?>
<span class="sep"> | </span>
<?php printf( __( 'Theme: %2$s by %1$s.', 'sydney' ), 'aThemes', 'Sydney' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
Now, on my wordpress page, there is a section, which is described by a file called "fp-call-to-action.php"
This file includes a button. Upon clicking the button, I want a youtube video to open in a lightbox, using prettyPhoto:
<div>
<a href="http://www.youtube.com/watch?v=40wYKjSd9r0" rel="prettyPhoto" title="youtube">
<button type="button" id="button">Jetzt anschauen!</button>
</a>
</div>
However, every time i click on the button, i get redirected to youtube. the video just won't open in a lightbox.
where am i making a mistake?
many thanks for your help!!
I finally managed to resolve the problem. The links were wrongly, total rookie mistake. My apologies!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm fairly new to PHP and also PHTML, how would I go about implementing JavaScript into PHTML? Here is the file i'm trying to implement it into, (viewer.phtml)
<?php
if ($type == "jpeg") {
$stype = "jpg";
} else {
$stype = $type;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo APP_NAME . " - $file.$stype"; ?></title>
<link rel="stylesheet" href="/site/images/assets/css/style.css">
</head>
<body>
<h1><?php echo "$file.$type"; ?></h1>
<div class="container">
<img src="/images/<?php echo "$type/$file.$stype"; ?>" alt="<?php echo "$file.$stype"; ?>">
</div>
<?php
$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$finish = $time;
$total_time = round(($finish - $start), 4);
?>
</body>
</html>
To add a script use script tag. Inject it inside your head tag , so your head might look like this
<head>
<meta charset="UTF-8">
<title><?php echo APP_NAME . " - $file.$stype"; ?></title>
<link rel="stylesheet" href="/site/images/assets/css/style.css">
<script>
//you Javascript code here
</script>
</head>
or
<head>
<meta charset="UTF-8">
<title><?php echo APP_NAME . " - $file.$stype"; ?></title>
<link rel="stylesheet" href="/site/images/assets/css/style.css">
<script type="text/javascript" src="your_js_file_location_here"></script>
</head>
hope this will help you
JavaScript can be added the same way you did your HTML.
You can either add it outside of the PHP tags
or you can use echo to output the text of your javascript.
Example 1:
<?php
//my PHP
?>
<html>
<head>
<script>alert('hello');</script>
</head>
<body>
</body>
</html>
Example 2
<html>
<head>
<script><?php echo "alert('hello');" ?></script>
</head>
<body>
</body>
</html>
Note that once the page or text is sent to the browser, javascript does not have access to the PHP variables directly without having to call back to the server through ajax.
Example
<?php
$message="hello";
?>
<html>
<head>
<script>
//this won't work right
alert('<?php $message ?>');</script>
<script>
//this will alert the value of $message at the time echo was called
alert('<?php echo $message ?>');</script>
</head>
<body>
</body>
</html>
<?php
//!!! This won't matter to the javascript alerts, even though its PHP value has changed.
$message='goodbye';
?>
I'm making a WordPress theme, I'm new to WordPress but know a lot about HTML, CSS, JavaScript, jQuery and PHP.
The problem is the theme I'm creating is not loading plugin js files.
Here the my header code:
<!DOCTYPE HTML>
<html>
<head>
<title>
<?php
wp_title('|','true','right');
bloginfo('name');
?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
</title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/css/grid.css" />
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url')?>/style.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url')?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url')?>/js/bootstrap.min.js"></script>
<?php
wp_head();
?>
</head>
<body>
<div class="container">
<div class="main-nav row" id="show-nav">
Navigation
</div>
<div class="main-nav row" id="close-nav">
Close Navigation
</div>
<div class="row nav-bar">
<?php
wp_nav_menu(array('container_class'=>'main-nav','container'=>'nav'));
?>
</div>
i'm loading jquery manually but i tried to load jquery with wordpress functions.
also tried this code,
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
but didn't working. i have tried many plugins, but just js files of plugins not loading so no plugins working.
I have tried metaslider plugin and Easy Image Gallery plugin. both works in Wordpress default theme but not in mine, because of js file.
Didn't include wp_footer function before closing body tag, it worked with wp_footer function.
Can you try add it on function.php, for example:
wp_register_script('jquery-ui', get_template_directory_uri().'/js/jquery-ui.js');
wp_enqueue_script('jquery-ui');
Im trying to find out if theres any thing similar to codeigniter as there is in Zend where I can append files to a header area like CSS or Footer area like javascript. Problem is I can't find anything which means either one doesn't exist and I have to make one (which not sure how to tackle that exactly), or I am searching for the wrong thing. Or I dunno. Anyone here know something?
This is what I am usually using in my CI projects...
application/views/v_header.php
<head>
<title><?php print $this->config->item('sitename'); if(isset($title)) echo ' - '.$title; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="xxxxxx" />
<meta name="author" content="Matteo Mattei - www.matteomattei.com"/>
<meta name="description" content="xxxxxxxxxxxxxxx"/>
<meta name="robots" content="INDEX,FOLLOW"/>
<meta name="keywords" content="xxxxx, xxxxx, xxxxx"/>
<link rel="shortcut icon" href="<?php echo base_url(); ?>images/favicon.ico" />
<?php
if(isset($style))
{
if(is_array($style))
{
foreach($style as $s)
echo '<link rel="stylesheet" href="'.base_url().'css/'.$s.'" type="text/css" media="screen" />';
}
else
echo '<link rel="stylesheet" href="'.base_url().'css/'.$style.'" type="text/css" media="screen" />';
}
?>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="screen" />
<?php
if(isset($jquery) && $jquery===TRUE)
echo '<script type="text/javascript" src="'.base_url().'js/jquery-1.7.1.min.js"></script>';
echo '<script type="text/javascript">';
echo 'var base_url="'.base_url().'";';
if(isset($js_variables))
{
foreach($js_variables as $k=>$v)
{
echo 'var '.$k.'="'.$v.'";';
}
}
echo '</script>';
if(isset($js))
{
if(is_array($js))
{
foreach($js as $j)
echo '<script type="text/javascript" src="'.base_url().'js/'.$j.'"></script>';
}
else
echo '<script type="text/javascript" src="'.base_url().'js/'.$js.'"></script>';
}
?>
</head>
<body>
In each controllwer function I can specify custom CSS files or JS files:
public function myfunc()
{
$data['jquery'] = TRUE;
$data['js'] = array(
'jquery-ui-1.8.16.custom.min.js',
'my_special.js',
'another_special.js',
);
$data['style'] = array(
'ui-lightness/jquery-ui-1.8.16.custom.css',
'my_custom.css',
);
$this->load->view('v_header',$data);
$this->load->view('v_menu',$data);
$this->load->view('v_dashboard',$data);
$this->load->view('v_footer',$data);
}