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
Related
I am new and trying to add CSS in DOCTOR folder add.php from directors.
Here is the folder directory:
Here is the code:
<?php
session_start();
if(!isset($_SESSION['username'])){
header('location: login.php');
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Responsive Bootstrap Advance Admin Template
</title>
<link rel="shortcut icon" href="<?php include 'images/mem2.png';?>" />
<!-- BOOTSTRAP STYLES-->
<link href="../assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="../assets/css/font-awesome.css" rel="stylesheet" />
<!--CUSTOM BASIC STYLES-->
<link href="../assets/css/basic.css" rel="stylesheet" />
<!--CUSTOM MAIN STYLES-->
<link href="../assets/css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
This is how I link external css in to my page, but result is not satisfactory. The output is below:
output:
No css is added.
Don't use include() inside an href and make sure you close that head tag
<link rel="shortcut icon" href="<?php echo 'images/mem2.png';?>" />
Or just
<?php include 'images/mem2.png';?>
I'm trying style the select tag using bootstrap. The problem is coming from the JQuery library file. The PHP code doesn't work because of the JQUery file. And if I remove the Jquery file, the PHP code functions properly but the selectpicker class doesn't work in the select tag.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--- Select libraries --->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo SITEURL; ?>/lib/js/jscal2/src/js/jscal2.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo SITEURL; ?>/lib/js/jscal2/src/js/lang/en.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/lib/js/jscal2/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/lib/js/jscal2/src/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/lib/js/jscal2/src/css/gold/gold.css" />
</head>
<-------SELECT CODE----->
<select class="selectpicker" name="partyCode" id="partyCode" data-width="530px">
<?php //echo getAgentASMOption($partyCode);
echo getAgentASMOption($_SESSION['party_Code']);
// echo '<br/>' .$mort01. '<br/>';
?>
</select>
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!
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');
I used more than three JavaScripts in Magento and I tried to fix some of the scripts (conflict I think) and it works but the last jQuery (jcarousel) it can be swapped to another category if I click the tabs "new arrival" and "most popular" but now it doesn't work, but if I comment out accordion js file it works but accordion can't work.. :(
Click here : http://thaiamuletstore.com/main1/index.php
head.phtml
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tango/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.min.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/Untlitie.js"></script> <!-- this-control-jcarousel-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/470fe3190c7d0ea4aacc14677c226000.js"></script> <!--this-control-Accordion-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.jcarousel.min.js"></script> <!-- this-control-jcarousel-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://thaiamuletstore.com/main1/style/ie.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/superfish.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/organictabs.jquery.js"></script>
<script src=http://thaiamuletstore.com/main1/js/menu_effect/script.js" type="text/javascript"></script>
jQuery.noConflict();
This is the thing for your rescue.