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);
}
Related
I have a weird problem.
When I am trying to call my PHP script from HTML I catch an exception from the title.
The script is called when I click on the picture.
The source code is working fine if I right click/open in new window.
It's also working if I throw jQuery out of my project.
Here is my PHP script and a section of the HTML:
<!DOCTYPE html>
<html>
<head>
<title>A.E.Z. d.o.o. Poduzeće za zastupanje u osiguranju</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Prodaja svih vrsta osiguranja!">
<meta name="keywards" content="osiguranje, sviben, aez, a.e.z., jeftino, štednja, automobil, kuća"><!--ubaciti kljucne rijeci-->
<meta name="author" content="Sandro Sviben">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="stil.css">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class = "col-md-6 col-sm-6 col-xs-12"><a data-toggle="pill" href="PamtiOdabranog.php?vlado=true" ><img src="Vlado.jpg" class="img-rounded img-responsive" name="vlado"></a> </div>
My PHP script:
<?php
if(isset($_GET['sandro'])) //ako je kliknut na sliku ili rijec sandro
{
echo "vraća sandro<br>";
$on_klik_on_picture_or_name = "Sandro";
}
elseif(isset($_GET['vlado']))
{
echo "vraća vlado<br>";
$on_klik_on_picture_or_name = "Vlado";
}
elseif(isset($_GET['ljerka']))
{
echo "vraća ljerka<br>";
$on_klik_on_picture_or_name = "Ljerka";
}
elseif(isset($_GET['marina']))
{
echo "vraća marina<br>";
$on_klik_on_picture_or_name = "Marina";
}
else
{
echo "Niste odabrali zatpunika!";
}
return $on_klik_on_picture_or_name;
?>
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
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');
I'm trying to get this script to work but am having some trouble.
This is my website.
I followed the instructions on the script's website and did this:
Added the reference for the script to head.
Added <script type="text/javascript">$(window).load(function() {$('body').nivoZoom();
});</script> right after the script reference in the head. Should I call the function elsewhere?
Wrapped the smaller image inside <a> tags and added the class of nivoZoom. All the links for images are working.
The problem with my website is that the script isn't working. Instead, if the smaller image is clicked it just leads to the large image address and doesn't zoom as it's suppose to.
UPDATE:
Here's my whole <head>, I don't see where I load jQuery for the second time OK, I see that it loads but I can't find where the code is:
<head>
<script type="text/javascript" src='/wp-content/themes/thefalltheme/js/example.js'></script>
<link rel="stylesheet" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/js/nivo-zoom.css" type="text/css" media="screen" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom();
});
</script>
<meta charset="<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon.png?force=1">
<!-- <link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon_blue.png?force=1">
<link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon_flag_india.png?force=1"> -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
</head>
UPDATE 2:
Found the additional loading, it was in the functions.php.
At the top of your page, you load jQuery + nivoZoom:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js" type="text/javascript"></script>
A few lines below, you load jQuery again, causing the previously made extensions to the jQuery framework to be undone:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
You should include the nivo zoom script AFTER loading jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js"></script>
Another note: Your CSS file is missing. Make sure that you also upload it.