getElementById not getting the id in wordpress 3.3.1 - javascript

i am building a wordpress site, twenty eleven theme. I want a widget area to be shown only on a certain page.
so added a javascript function to the <head> which is called by <body onload="show_collection_area">
The function called, since the console.log(obj.id) writes "text-2" to the console (which is the right id). But when i set visibilty to none in this function:
function show_collection_area(){
if (document.location == "http://dutchmountaineer.com/wp/?page_id=116"){
obj = document.getElementById('text-2');
obj.style.visibility = 'visible';
console.log(obj.id)
console.log(obj);
} else {
document.getElementById("text-2").style.visibility = 'none';
}
}
nothin happens. I tried calling the function from the page itself by using a button but the result is the same.
What am i doing wrong?
Thanks a lot!
PS the whole code:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Eleven
* #since Twenty Eleven 1.0
*/
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
</head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* 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();
?>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
});
});
function show_collection_area(){
if (document.location == "http://dutchmountaineer.com/wp/?page_id=116"){
obj = document.getElementById('text-2');
obj.style.visibility = 'visible';
console.log(obj.id)
console.log(obj);
} else {
document.getElementById("text-2").style.visibility = 'none';
}
}
function display_gallery(id)
{
//first we set all displays to none
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload = "show_collection_area()" <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><?php bloginfo( 'name' ); ?></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) :
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>
<?php
// Has the text been hidden?
if ( 'blank' == get_header_textcolor() ) :
?>
<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
</header><!-- #branding -->
<div id="main">


The value for "visibility" should be "hidden" when you want it to be hidden. The "none" value works for "display".

Related

My Wordpress site page scroll not working

I created a page using the page builder. The content is not showing fully. Because I cannot scroll the page to see the whole page. There are 3-page codes I include in here. How to fix this error. Anyone can help me?
my header-test.php page code
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'test' ); ?></a>
<header id="masthead" class="site-header">
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
</div>
my footer-test.php page code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'test' ) ); ?>">
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'test' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'test' ), 'test', 'Underscores.me' );
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Here is my created customfullwidth.php page code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'test' ) ); ?>">
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'test' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'test' ), 'test', 'Underscores.me' );
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

How to replace Twenty Seventeen Wordpress header with slider?

I would like my header to be replaced by my slider made with the Master Slider widget. I want the slider to be full size, just like the header image is right now.
This is the header code:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
// If a regular post or page, and not the front page, show the featured image.
if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
echo '<div class="single-featured-image-header">';
the_post_thumbnail( 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
The shortcode for my slider is:
[masterslider id="1"]
PHP function:
<?php masterslider(1); ?>
How can I insert this image slider to replace the header image on the front page only without affecting the rest of the page?
Thanks.

How to change header background on scroll down?

I started with modifing the header on my site, and have a hard time to make it worked as i wanted.
I want, header background to change background color to white, when scroll down 100-150px, exactly like is on this site.
I found this JS:
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});
what i inserted into custom JS plugin in my WP site.
Also have this JS:
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
Is maybe this better sollution, then previous code?
How to use this JS to make the effect on demo site i posted before in this post?

use following code snippet, working fine in the demo website
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"red"});
} else {
jQuery('#navigation').css({"background":"transparent"});
}
});

Try this code.
$(function() {
var bgcolor_navigation = function(){
var bg_offset_top = $(window).scrollTop(); // our current vertical position from the top
if ((100 > bg_offset_top) &&(150 < bg_offset_top)) {
$('#navigation').addClass("bgcolorheadnav");
} else {
$('#navigation').removeClass("bgcolorheadnav");
}
};
// run our function on load
bgcolor_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
bgcolor_navigation();
});
});
css
.bgcolorheadnav{
background-color:#000;
}

This is just for websites made by WordPress:
Create a child theme for your theme.
Activate your child theme.
Copy your header.php file to the child theme folder by FTP client
Replace the code in the child’s header.php with this code:
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('.header-main').addClass('scrolled');
}
else {
$('.header-main').removeClass('scrolled');
}
});
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
Put following code to your Child Theme style.css file or install the Simple Custom CSS plugin and put the code there.
.header-main {
transition:top 0.5s ease;
box-shadow:0 0 10px black;
transition: background-color 0.5s ease;
}
.scrolled {
background: #bada55!important;
}
If you don't do the CSS this way and put the code to themes -> style.css, you will loose all changes you made when you update your theme in the future.

The site you referred uses bootstrap framework.
You can see what is done on that site by right clicking on the site and say inspect element. The following code was found for the navbar: This way you do not need to write custom js, jut follow the industry the best practice.
<nav class="navbar navbar-dark navbar-fixed-top top-nav-collapse" role="navigation">
<div class="navbar-container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">
<span class="logo hidden-xs">
<img src="img/logo-santa.svg" alt="">
</span>
<span class="logo hidden-sm hidden-md hidden-lg">
<img src="img/logo-notext.svg" alt="">
</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden active">
</li>
<li class="page-scroll">
Pricing
</li>
<li class="page-scroll">
XenoPanel
</li>
<li class="page-scroll">
Multicraft
</li>
<li class="page-scroll navbar-borderbtnn">
Client Area <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Installing bxSlider Jquery plugin in wordpress

I am making my first steps learning to code. I made some courses on Internet an now I decided to build a Wordpress theme so like this I can continue learning from the practice.
I decided to make an image slider, so for this I decided to install a Jquery plugin. I know that I can install a wordpress plugin but I think that it's convenient to learn how to install a Jquery plugin too for many reasons.
I followed these steps to install the bxSlider plugin, but unfortunately there is something that it's not ok and it makes my plugin doesn't work:
1) Functions.php: I loaded all the files that I need
function loadbxslider() {
wp_enqueue_style('bxstyle', '/jquery.bxslider/jquery.bxslider.css');
wp_enqueue_script('bxscript', '/jquery.bxslider/jquery.bxslider.min.js', array('jquery'));
}
add_action('init', 'loadbxslider');
2) Header.php: I wrote this before <?php wp_head(); ?>:
<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->
And this inmediately after <?php wp_head(); ?>:
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: true
});
});
// ]]></script>
So the first part of my header.php is like this:
?><!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="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->
<?php wp_head(); ?>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: true
});
});
// ]]></script>
</script>
</head>
3) bxSlider inside my content: using the id slidebx
<div id="slidebx">
<div><?php the_field('image1'); ?></div>
<div><?php the_field('image2'); ?></div>
<div><?php the_field('image3'); ?></div>
<div><?php the_field('image4'); ?></div>
<div><?php the_field('image5'); ?></div>
<div><?php the_field('image6'); ?></div>
<div><?php the_field('image7'); ?></div>
<div><?php the_field('image8'); ?></div>
<div><?php the_field('image9'); ?></div>
<div><?php the_field('image10'); ?></div>
</div>
I have a week trying to discover why this plugin doesn't work. If you have some suggestion would be good for my learning process.

how to dynamically (or not) move javascript to the footer

I have a wordpress site, and I need to move some javascript to the footer. I am using a theme (photocrati) that only uses the wp_enqueue_scripts tag a total of 4 times in the header.php file.
What I'm looking to do is find a way, hopefully dynamically, to move the javascript files to the footer. I realize this would be much easier using the $in_footer if they were properly referenced using the enqueue_scripts, but alas, that's not the case.
Being that this is a photography studio website, I need to do everything I can to reduce loading time. Now, obviously I'm not about to move CSS to the footer like google page speed recommends because I don't want my site being rendered unformatted when the visitor first views it.
After doing everything else I can (I obviously can't do anything about minimizing or setting leveraging browser caching on files not hosted with my site, ie the google analytics js file), the page speed insights recommends, "Remove render-blocking JavaScript and CSS in above-the-fold content" is all I have left. I am hoping once I move the js to the footer my page load time will be under 5 seconds considering it is now just under 6 and there are 19 script resources.
Hopefully someone can give me some guidance on being able to do this through some PHP code added to the functions.php file since I (for the most part) understand what's going on with PHP code when I am writing. But, I am having a hard time deciphering what is going on in the header file, and being able to find all 19 js files to delete them from the header file and enqueue them properly.
EDIT Here is the header.php file. I've noticed that some of the scripts are not even called here in any way because when I search the file for say "hoverintent.js" it's nowhere to be found, but if I search the source code after my page loads, sure enough it's in the header.
<?php
$preset = Photocrati_Style_Manager::get_active_preset();
extract($preset->to_array());
$rcp = $wpdb->get_results("SELECT fs_rightclick,lightbox_mode,lightbox_type FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");
foreach ($rcp as $rcp) {
$fs_rightclick = $rcp->fs_rightclick;
$lightbox_mode = $rcp->lightbox_mode;
$lightbox_type = $rcp->lightbox_type;
}
$music = $wpdb->get_results("SELECT music_blog,music_blog_auto,music_blog_file,music_blog_controls,music_cat,music_cat_auto,music_cat_file,music_cat_controls FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");
foreach ($music as $music) {
$music_blog = $music->music_blog;
$music_blog_auto = $music->music_blog_auto;
$music_blog_controls = $music->music_blog_controls;
$music_blog_file = $music->music_blog_file;
$music_cat = $music->music_cat;
$music_cat_auto = $music->music_cat_auto;
$music_cat_controls = $music->music_cat_controls;
$music_cat_file = $music->music_cat_file;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 9 ]> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> class='ie9'><!--<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><!--<![endif]-->
<head profile="http://gmpg.org/xfn/11">
<?php
Photocrati_Fonts::render_google_font_link(array(
array($font_style, $font_weight, $font_italic),
array($sidebar_font_style, $sidebar_font_weight, $sidebar_font_italic),
array($sidebar_title_style, $sidebar_title_weight, $sidebar_title_italic),
array($title_style, $title_font_weight, $title_italic),
array($h1_font_style, $h1_font_weight, $h1_font_italic),
array($h2_font_style, $h2_font_weight, $h2_font_italic),
array($h3_font_style, $h3_font_weight, $h3_font_italic),
array($h4_font_style, $h4_font_weight, $h4_font_italic),
array($h5_font_style, $h5_font_weight, $h5_font_italic),
array($description_style, $description_font_weight, $description_font_italic),
array($menu_font_style, $menu_font_weight, $menu_font_italic),
array($submenu_font_style, $submenu_font_weight, $submenu_font_italic),
array($footer_widget_style, $footer_widget_weight, $footer_widget_italic),
array($footer_font_style, $footer_font_weight, $footer_font_italic)
));
?>
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- IMPORTANT! Do not remove this code. This is used for enabling & disabling the dynamic styling -->
<?php if($dynamic_style) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/dynamic-style.php" />
<?php if($logo_menu_position == 'left-right') { ?>
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />
<![endif]-->
<?php } ?>
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/style.css" />
<?php if($logo_menu_position == 'left-right') { ?>
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />
<![endif]-->
<?php } ?>
<?php } ?>
<!-- End dynamic styling -->
<!--[if IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.lightbox-0.5.css" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php
if( !is_admin()){
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-effects-core');
if ($preset->custom_js) wp_enqueue_script('photocrati-custom-js', site_url('?photocrati-js'));
}
?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if($fs_rightclick == "ON") { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/clickprotect.js"></script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/jplayer.style.css" />
<?php if($lightbox_type == 'fancy'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
<?php elseif($lightbox_type == 'light'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-light.css" type="text/css" />
<?php elseif($lightbox_type == 'thick'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-thick.css" type="text/css" />
<?php endif ?>
<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup.css" type="text/css" />
<?php endif ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/admin/js/jquery.fancybox-1.3.4.pack.js"></script>
<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup-v0.9.9.min.js"></script>
<?php endif ?>
<?php if($style_skin == 'modern' && is_front_page()): ?>
<?php
// when selecting multiple images as background then $home_bg_image is an array
if (!is_array($home_bg_image)) {
$home_bg_image = array($home_bg_image);
}
$home_bg_list = array();
foreach ($home_bg_image as $bg_image) {
if ($bg_image != null) {
$bg_img = Photocrati_Style_Manager::get_image_url($bg_image, true);
if ($bg_img != null) {
$home_bg_list[] = array(
'image' => $bg_img,
'thumb' => Photocrati_Style_Manager::get_image_url($bg_image, true, 'thumbnail'),
'title' => $bg_image,
);
}
}
}
// check that there are 1 or more images selected, otherwise fallback to default
if ($home_bg_list == null) {
$home_bg = 'default';
}
?>
<?php if($home_bg == 'slideshow'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ? >/scripts/supersized/slideshow/css/supersized.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : <?php echo (floatval($home_bg_interval_speed) * 1000) ?>, // Length between transitions
transition : <?php echo ($home_bg_transition_effect) ?>, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : <?php echo (floatval($home_bg_transition_speed) * 1000) ?>, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : <?php echo json_encode($home_bg_list) ?>,
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
There's the part of the header.php file that contains the js file references. As I said before, not all of them are called through the header.php file.

Enqueue script has a fifth parameter, which is a boolean, false as default. If you set to true, your scripts will be in the footer. In case, your theme has the wp_footer() method in the footer.
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
An example:
<?php wp_enqueue_script( 'mysript', get_template_directory_uri() . '/js/myscript.js', array(), false, true ); ?>

Categories