I have wordpress website with drop down menu.
The problem is that drop-down optiona are visible only when I am logged to wp-admin. I found that some of theme JS are not loaded for not logged customers. I can not find the reason.
My menu structure looks like:
In practice for logged user:
for not logged user drop-down (selected by red) is not visible.
I found that the logic for it is in theme.js which is not loaded for not logger user somehow.
My function.php looks like:
function csp_scripts() {
wp_enqueue_style('google-font','http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700');
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_style( 'csp-style', get_stylesheet_uri() );
wp_enqueue_script('jquery');
wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/modernizr.js', array(), '20120206', false );
wp_enqueue_script('bootstrap-js',get_template_directory_uri() . '/js/bootstrap.min.js',array('jquery'),false);
wp_enqueue_script( 'jquery_validate', get_template_directory_uri() . '/js/jquery.validate.min.js', array( 'jquery' ) );
wp_enqueue_script('jquery.contentslider',get_template_directory_uri() . '/js/jquery.contentslider.js',array('jquery'),true);
wp_enqueue_script('theme',get_template_directory_uri() . '/js/theme.js',array('jquery'),true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'csp_scripts' );
/**
* CSP Hooks
*
*/
function csp_inside_head() {
do_action('csp_add_inside_head');
}
function csp_add_inside_head() {
}
csp_scripts is including
wp_enqueue_script('theme',get_template_directory_uri() . '/js/theme.js',array('jquery'),true);
I don't know where it should be used to include it also for not logged users.
My header templates code:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up to <nav id="menu">
*
*/
$options = TitanFramework::getInstance( 'csp-theme' );
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php
//Start Wordpress
wp_head();
echo $options->getOption('header_code_js');
echo '<script type="text/css" rel="stylesheet">';
echo $options->getOption('header_code_css');
echo '</script>';
?>
</head>
<!-- NAVBAR
================================================== -->
<?php if(is_front_page()): ?>
<body <?php body_class(); ?> >
<?php else: ?>
<body <?php body_class('interior'); ?> >
<?php endif; ?>
<div class="navbar-wrapper super-main-wrapper">
<!-- Secondary Navigation Bar -->
<div id="secondary-nav" class="no-margin-bottom">
<div class="container">
<!-- Social Media Buttons/Icons -->
<div class="navbar-caption">
<!-- <ul class="nav"> -->
<span class="secondary-caption">
<h3 class="hidden-xs"><?php echo $options->getOption('header_text'); ?></h3>
<h3 class="visible-xs"><?php echo $options->getOption('header_text_mobile'); ?></h3>
</span>
<!-- </ul> -->
</div>
</div>
</div>
<!-- Main Navigation Bar -->
<div id="main-nav" class="navbar navbar-static-top">
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 logo-container">
<?php
$imageID = $options->getOption( 'site_logo' );
$imageSrc = $imageID;
if ( is_numeric( $imageID ) ) {
$imageAttachment = wp_get_attachment_image_src( $imageID,'full');
$imageSrc = $imageAttachment[0];
//print_r($imageAttachment);
}
else {
$imageSrc =get_template_directory_uri() .'/images/logo.png';
}
?>
<a href="<?php echo home_url(); ?>" class=""><img src="<?php echo $imageSrc ?>" class="logo" /></a>
<!-- <a href="<?php echo home_url(); ?>" class="visible-xs visible-sm"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" class="logo" /></a> -->
</div>
<div class="visible-xs col-xs-12 navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<div class="icon-bars pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="icon-text pull-left">
Main Menu
</div>
</button>
</div>
<!-- Navigation Dropdown Menu -->
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 navbar-collapse collapse">
<div class="navbar-wrapper container">
<?php echo csp_display_menu('main-menu'); ?>
</div>
</div>
</div> <!-- /.container -->
</div> <!-- /#main-nav -->
</div> <!-- /.navbar-wrapper -->
Can someone point me how to fix it in right way?
theme.js:
/*
Theme JS
@author: Sada Garba
@date: September 20, 2013
@description: Main JS file for Cool Springs Chiro' standard template
@dependency: jQuery must be imported on the page before this file
*/
//Global Namespace Object
var CSP = {
//Global Attributes
jq: null,
options: null,
//Initialization Function
init: function(jqObj) {
console.log("Initializing...");
var self = this;
//assign object wide reference to jQuery
self.jq = jqObj;
var jq = self.jq;
//setup the dropdown Hover Intent
jqObj(".nav .dropdown").on('show.bs.dropdown', function(e) {
var culprit = jqObj(this);
culprit.find(".dropdown-menu")
.css("opacity", 0)
.animate({ opacity: 1 } , 700);
}).on('hide.bs.dropdown', function(){
var culprit = jqObj(this);
culprit.find(".dropdown-menu")
.animate({ opacity: 0 } , 400);
}).hover( function(){
var culprit = jqObj(this);
this.myTimeout = setTimeout(function() {
if(!culprit.hasClass("open")) culprit.find(".dropdown-toggle").dropdown("toggle");
//console.log("Did I toggle?");
}, 300);
}, function() {
var culprit = jqObj(this);
clearTimeout(this.myTimeout);
delete this.myTimeout;
if(culprit.hasClass("open")) culprit.find(".dropdown-toggle").delay(500).dropdown("toggle");
}
);
//locate any nav-tabs and activate the first element
jqObj(".nav-tabs a:first").tab("show");
//locate any popovers and enable/initialize them
jqObj(".roster-popover").popover({
});
//locate any content sliders and activate them
/* if(jqObj(".program-carousel-wrapper").contentSlider) {
jqObj(".program-carousel-wrapper").contentSlider({
paged: true,
//startIndex: 2
});
} */
//Slider Carousel initialization
jqObj('.carousel').carousel({ //should be $(...).carousel/bannerStream
interval: 6000,
pause: false
});
//locate any video launchers and initialize/activate
/* jqObj(".video-launcher").each(function(idx, val) {
val = jqObj(val);
val.on("click", function(e) {
console.log("...launcher clicked...");
var vurl = val.attr("data-video-url"),
vcontainer = val.attr("data-video-container");
self._launchVideo(vcontainer, vurl);
});
}); */
//Add Window Resize Listener
jqObj(window).on("resize", function(e) {
self._handleWindowResize(e);
});
this._handleWindowResize();
//If Modernizer.touch initializations
/*
if(Modernizr.touch) {
this.touchInit(jqObj);
}
*/
},
touchInit: function(jqObj) {
var touchHandler = function(event) {
//Touch Event Capabilities to jQuery-UI elements
/*
* picked from http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices
*
*/
// trick to add support for touch event to elements/widgets that do not support it
// by converting convert touchevents into mouseevents
// only apply this trick to ui-draggable elements
if ( ! jqObj(event.target).hasClass('ui-draggable') ) {
return;
}
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type) {
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
// convert touchevents into mouseevents
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
// faster links for touch devices
// by wiring directly touchend event as if it was a click (and disabling click handler)
//console.log("touch initializer called");
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
var link = links[i];
if ( link.href !== undefined && link.href !== '') {
link.addEventListener("click", function(e) {
e.preventDefault();
});
link.addEventListener("touchend", function() {
document.location = this.href;
});
}
};
// listen to touch events and provide support to them where needed
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
},
_handleWindowResize: function(e) {
var jq = this.jq || null;
var overlayCaption = false; //this is the default ...carousel overlays the slider
//images in the carousel
if(jq) {
//find any carousels on the page and adjust height
/* jq(".jq-monitor.carousel .item.active > img").each(function(idx, elem) {
//console.log(elem, ":", jq(elem).height());
var parentItem = jq(elem).parent();
var newHeight = jq(elem).height();
var captionItem = parentItem.find(".carousel-caption");
//console.log("captionItem", elem, captionItem.innerWidth(), jq(elem).width());
if( (captionItem.innerWidth() === jq(elem).width()) && (overlayCaption === false) ) {
newHeight += captionItem.innerHeight();
}
var itemWrappers = parentItem.parent().find(".item");
if(newHeight > 0) itemWrappers.height(newHeight);
}); */
//find any hero images that need height's adjusted
jq(".no-carousel-layout .hero .item.large").each(function(idx, elem) {
var parentItem = jq(elem).parent(),
parentHeight = parentItem.height(),
parentWidth = parentItem.width();
//console.log("hero item height: ", parentHeight);
//console.log("hero width: ", parentWidth);
if(parentWidth > 970) {
var availHeight = (parentItem.find(".item.small").height() * 2) - jq(elem).find(".item-image").height();
var diff = (parentItem.find(".item.small").innerHeight() - parentItem.find(".item.small").height()) / 2;
//console.log(parentItem.find(".item.small").innerHeight());
//console.log(jq(elem).find(".item-image").height());
//console.log(jq(elem).find(".item-image").innerHeight());
jq(elem).find(".item-summary").height(availHeight + diff);
}
});
} else {
if(typeof console !== "undefined") console.log("jq Error: Not set to jQuery object");
}
},
};
//JQuery onReady event handler
jQuery(document).ready(function($j){
S = CSP;
//Call initialization function
S.init($j);
});
//Helper Functions'
(function($){
var adminBar=$('body').find('#wpadminbar');
console.log(adminBar);
}(jQuery));
When I am not logged then in the sources I got only one included js: wp-includes/wp-emoji*js
When I am logged the are more JS included, but the most important is: http://website/wp-content/themes/csp/js/theme.js?ver=1
I can not find the solution how to include it when I am not logged.
