WordPress - Header position Top, Left &Right
I'm having a little hard time to figuring out how to have multiple headers in the website that I'm creating. And the columns width for portfolio. I Want to add a option for displaying header in site. Top Right And default to be left. And be able to set the columns width in portfolio.
I would like to know how to load the top and right headers and be able to make some customization in JavaScript files too, because the SidebarWidth in jquery.blog.js is 220.
<?php
if of_get_option ('header_position','top') :
get_header( 'top' );
elseif of_get_option ('header_position','right') :
get_header( 'right' );
else :
get_header();
endif;
?>
Now I need themme to understand that user choose the header top and I want the header to be on top or on right side if the right side option is chosen.
<?php
wp_register_script('your-script', $script-url, $dependencies, false, false);
$pass_to_js = array();
if of_get_option ('header_position','top') :
$pass_to_js['sidebarWidth'] = /* a number */;
get_header( 'top' );
elseif of_get_option ('header_position','right') :
$pass_to_js['sidebarWidth'] = 220;
get_header( 'right' );
else :
$pass_to_js['sidebarWidth'] = /* another number */;
get_header();
endif;
wp_localize_script('your-script', 'js-array-name', $pass_to_js);
wp_enqueue_script('your-script');
?>
in the code above if elseif and endif lines are giving me errors. /// in my portfolio case
wp_register_script('luna_portfolio', get_template_directory_uri() . '/js/jquery.portfolio.js', 'jquery', true);
wp_localize_script('luna_portfolio', 'lunaAjax', array('ajaxurl'=>admin_url('admin-ajax.php'),'nonce' => wp_create_nonce('ajax-nonce')));
and the js part
function luna_getCols(){
var cols = 1;
var windowWidth = jQuery(window).width();
if(windowWidth>=380 && windowWidth<1160) cols = 3;
else if(windowWidth>=1160 && windowWidth<1640) cols = 4;
else if(windowWidth>=1640 && windowWidth<2100) cols = 5;
else if(windowWidth>=2100) cols = 6;
return cols;
}
Answer
Yes, use that code, then in your theme directory you put the files header.php
,header-top.php
and header-right.php
each with the different header code. Read more about templating the header at https://codex.wordpress.org/Function_Reference/get_header.
For the js side of your problem you can pass variables from the php to your js file depending on conditions. Your code would look a little something ... like this:
<?php
wp_register_script('your-script', $script-url, $dependencies, false, false);
$pass_to_js = array();
if (of_get_option ('header_position','top')) :
$pass_to_js['sidebarWidth'] = /* a number */;
get_header( 'top' );
elseif (of_get_option ('header_position','right')) :
$pass_to_js['sidebarWidth'] = 220;
get_header( 'right' );
else :
$pass_to_js['sidebarWidth'] = /* another number */;
get_header();
endif;
wp_localize_script('your-script', 'js-array-name', $pass_to_js);
wp_enqueue_script('your-script');
?>
Then in your js file js-array-name
will exist as a global array. You refer to the sidebarWidth
anywhere as
js-array-name.sidebarWidth
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM