Right now my header in mystile theme looks like in picture 1, is it possible to make it look like in picture 2. In short i want to have featured banner image above the main navigation without white space between them.
Can someone please tell me the custom CSS for that or what to put in header.php?
Thanks a lot in advance.
Picture 1
1
Picture 2
2
this is my header.php
<?php
// File Security Check
if ( ! empty( $_SERVER['SCRIPT_FILENAME'] ) && basename( __FILE__ ) == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
die ( 'You do not have sufficient permissions to access this page!' );
}
?>
<?php
/**
* Header Template
*
* Here we setup all logic and XHTML that is required for the header section of all screens.
*
* #package WooFramework
* #subpackage Template
*/
global $woo_options, $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php if ( $woo_options['woo_boxed_layout'] == 'true' ) echo 'boxed'; ?> <?php if (!class_exists('woocommerce')) echo 'woocommerce-deactivated'; ?>">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php woo_title(''); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
wp_head();
woo_head();
?>
</head>
<body <?php body_class(); ?>>
<?php woo_top(); ?>
<div id="wrapper">
<div id="top">
<nav class="col-full" role="navigation">
<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
<?php } ?>
<?php
if ( class_exists( 'woocommerce' ) ) {
echo '<ul class="nav wc-nav">';
woocommerce_cart_link();
echo '<li class="checkout">'.__('Checkout','woothemes').'</li>';
echo get_search_form();
echo '</ul>';
}
?>
</nav>
</div><!-- /#top -->
<?php woo_header_before(); ?>
<header id="header" class="col-full">
<hgroup>
<?php
$logo = esc_url( get_template_directory_uri() . '/images/logo.png' );
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' && is_ssl() ) { $logo = preg_replace("/^http:/", "https:", $woo_options['woo_logo']); }
?>
<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
<a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( get_bloginfo( 'description' ) ); ?>">
<img src="<?php echo $logo; ?>" alt="<?php esc_attr( get_bloginfo( 'name' ) ); ?>" />
</a>
<?php } ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<h3 class="nav-toggle">☰ <span><?php _e('Navigation', 'woothemes'); ?></span></h3>
</hgroup>
<?php woo_nav_before(); ?>
<nav id="navigation" class="col-full" role="navigation">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav fl">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><?php _e( 'Home', 'woothemes' ); ?></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>
</nav><!-- /#navigation -->
<?php woo_nav_after(); ?>
</header><!-- /#header -->
<?php woo_content_before(); ?>
and i know that this control featured banner image
but if move that line to any onther place in header.php my main navigation simply disappear. what do i miss, some codeing or?
ok i did insert featured banner image with your help but know it is in top left corner of webpage and no matter what i do it wont move to the right. its look like it take 50% of left side of page and i cant center it to the middle, any advice?
You should edit header.php and replace between
"featured banner" to "main navigation".
And for the empty space, Check theme styles in chrome inspect tool and add custom styles.
I recommend you to use child-theme, because if you modify a theme directly and it is updated, then your modifications may be lost.
For Nav:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
For Banner:
<header id="masthead" class="site-header" role="banner"></header>
Related
Looking for help in getting my wordpress theme to display header image on all pages and not just the home page as it currently does. All pages use get_header php command and the header.php contains the following 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 Superb_Landingpage
*/
?>
<!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="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="navigation-wrapper">
<div class="site grid-container">
<header id="masthead" class="site-header grid-x grid-padding-x">
<div class="site-branding large-4 medium-10 small-9 cell">
<?php
the_custom_logo();
if ( is_front_page() && is_home() && is_page() ) :
?>
<div class="logo-container">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php
else :
?>
<div class="logo-container">
<h2 class="site-title"><?php bloginfo( 'name' ); ?></h2>
<?php
endif;
$superb_landingpage_description = get_bloginfo( 'description', 'display' );
if ( $superb_landingpage_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $superb_landingpage_description; /* WPCS: xss ok. */ ?></p>
<?php endif; ?>
</div>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation large-8 medium-2 small-3 cell">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
</div>
</div>
<?php if ( get_header_image() ) : ?>
<?php if ( is_front_page() ) : ?>
<div class="content-wrap">
<div class="bottom-header-wrapper">
<img src="<?php echo esc_url(( get_header_image()) ); ?>" alt="<?php echo esc_attr(( get_bloginfo( 'title' )) ); ?>" />
</div>
</div>
<?php endif; ?>
<?php endif; ?>
<div id="page" class="site grid-container start-container-head">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'superb-landingpage' ); ?></a>
<div id="content" class="site-content grid-x grid-padding-x">
What do I add/remove to simply have the header display on all pages?
I've tried removing the if/else conditions in the header.php but wordpress keeps rolling back the edit claiming errors. Any help is greatly appreciated! Thank you.
Try it
<?php
if ( is_home() ) {
// This is a homepage
} else {
// This is not a homepage
}
?>
<?php
if ( is_front_page() && is_home() ) {
// This is a homepage
} else {
// This is not a homepage
}
?>
If this does not work try this
<?php
if ( is_front_page() ) {
// This is a homepage
} else {
// This is not a homepage
}
?>
I am having difficulty to make my hamburger menu to display a full width and height on toggle button click. I am trying to create a hamburger with small icons positioned left of the screen which when clicked displays a full width and height (transparent) and position the navitems horizontally.
The image of the Hamburger Menu. I only want the icon (the one with white border) displayed without container.
When this icon is clicked, it displays
I don't want to display something like this, I want a full width and height with navitems displayed horizontally, also with respective icons. As follow;
Header.php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
$container = get_theme_mod( 'understrap_container_type' );
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'wp_body_open' ); ?>
<div class="site" id="page">
<!-- ******************* The Navbar Area ******************* -->
<div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite">
<a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
<nav class="navbar navbar-dark bg-primary">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
</nav><!-- .site-navigation -->
<nav>
<!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?><!-- end custom logo -->
</nav>
</div>
I just want to know which of the classes or ids that need to be tweaked. As I have tried everything possible, it is worsening the situation for me.
'menu_class' => 'navbar-nav ml-auto',
Try to change this class to container to get full width
I'm trying to add some contact details to the right of the logo on this site.
At the moment it is displaying beneath the logo. I'd also like to change the font and colour to match the nav bar.
Here's the code for the header.php to show what I did to the site.
I'm also aware that Laura (the owner) should be using a child theme but her husband built the site and has already done a lot of work without a child so building one for this one change seems redundant?
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js" >
<!-- start -->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telephone=no">
<!-- set faviocn-->
<?php
global $pmc_data;
$favicon = '';
if(isset($pmc_data['favicon']))
$favicon = $pmc_data['favicon'];
if (empty($favicon)) { $favicon = get_template_directory_uri() .'/images/favicon.ico'; }
?>
<!-- set title of the page -->
<title>
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( 'Page %s' , max( $paged, $page ) );
?>
</title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link id="favicon" rel="icon" type="image/png" href="<?php echo $pmc_data['favicon'] ?>">
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) {wp_enqueue_script( 'comment-reply' ); }?>
<!-- add google analytics code -->
<?php
if(isset($pmc_data['google_analytics']))
echo pmc_stripText($pmc_data['google_analytics']);
?>
<?php wp_head();?>
</head>
<!-- start body -->
<body <?php body_class(); ?>>
<!-- start header -->
<header>
<div id="headerwrap" >
<!-- fixed menu -->
<div class="pagenav fixedmenu">
<div class="holder-fixedmenu">
<div class="logo-fixedmenu">
<?php $logo = $pmc_data['logo']; ?>
<img src="<?php if ($logo != '') {?><?php echo $logo; ?><?php } else {?><?php get_template_directory_uri(); ?>/images/logo.png<?php }?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description') ?>" >
</div>
<div class="menu-fixedmenu">
<?php
if ( has_nav_menu( 'scroll_menu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-scroll',
'theme_location' => 'scroll_menu',
'echo' => true,
'fallback_cb' => 'ideo_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new description_walker())
);
}
?>
</div>
<!-- respoonsive menu for scrool bar -->
</div>
</div>
<!-- top bar -->
<div class="TopHolder">
<?php pmc_showTop() ?>
</div>
<!-- logo and main menu -->
<div id="header">
<div class = "header-inner">
<div class="header-social">
<?php pmc_socialLink() ?>
</div>
<div id="logo">
<?php $logo = $pmc_data['logo']; ?>
<img src="<?php if ($logo != '') {?><?php echo $logo; ?><?php } else {?><?php get_template_directory_uri(); ?>/images/logo.png<?php }?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description') ?>" />
<div id="contact">
<p>07939598489</p> <p>laura#bristolbridalboutique.co.uk</p>
</div>
</div>
<!-- respoonsive menu main-->
<div class="respMenu noscroll">
<div class="resp_menu_button"><i class="fa fa-list fa-2x"></i> Menu</div>
<?php
if ( has_nav_menu( 'resp_menu' ) ) {
$menuParameters = array(
'theme_location' => 'resp_menu',
'walker' => new Walker_Responsive_Menu(),
'echo' => false,
'items_wrap' => '<div class="event-type-selector-dropdown">%3$s</div>',
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>,<br>,<div>,<i>' );
}?>
</div>
<!-- main menu -->
<div class="pagenav">
<?php
if ( has_nav_menu( 'main-menu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-header',
'theme_location' => 'main-menu',
'echo' => true,
'fallback_cb' => 'ideo_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new description_walker())
);
}
?>
</div>
</div>
</div>
</header>
To get it on the right side you can use
#contact{ float:right;}
and to align it with the rest you can add
margin-top:54px;
for the font/color you can add
font-family: "brioche-italic", georgia, "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif !important;
font-size: 17px;
color: #94bfba !important;
I have an Index.php file that I need to use as a custom page that I would like to have use some of the themes styles and elements Navigation, Footer, Contact Form, ETC.... The default header seems to be calling the body and its very difficult to find the parts of the header. I have been making a considerable amount of changes so the file in drive should be kept updated until I get this resolved.
Currently I have the page/code working thanks to #David and the advice given in this question:
run php application within wordpress
(links and files removed for privacy, and search engine listings removal)
there was a few files missing so I cant test this template itself.
But it is simply a case of replacing php code that calls for a variable with actual output (from view source) to create the template you want.
Go back to using the default index.php (remove the header/footer calls).
Create a new template with the code below and link to it (using the rewrite code from the previous Q you linked above)
There is quite a bit of code in the header.php that calls variables set from the db but hopefully the below code will remove the parallex classes, if not copy the header file and call it header-custom.php. You can replace get_header('custom') to call this header instead. Anywhere you see a php tag inside a html element tag, replace with the actual output you can see in view source.
<?php
/**
* The template for displaying 404 pages (Not Found).
*
* #package unitedthemes
*/
get_header();
?>
<div class="grid-container">
<div id="primary" class="grid-parent grid-100 tablet-grid-100 mobile-grid-100">
<div class="grid-70 prefix-15 mobile-grid-100 tablet-grid-100">
<header class="page-header fullwidth ut-header-light">
<h1 class="page-title"><span><?php _e('RepairStatus'); ?></span></h1>
</header>
<?php require_once get_stylesheet_directory().'/repairstatus/index.php'?>
</div><!-- .page-header -->
</div><!-- .grid-100 mobile-grid-100 tablet-grid-100 -->
</div><!-- .grid-container -->
<?php get_footer(); ?>
header-custom.php contents (call using get_header('custom'); )
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<?php ut_meta_hook(); //action hook, see inc/ut-theme-hooks.php ?>
<?php if ( defined('WPSEO_VERSION') ) : ?>
<!-- Title -->
<title><?php wp_title(); ?></title>
<?php else : ?>
<?php ut_meta_theme_hook(); ?>
<?php endif; ?>
<!-- RSS & Pingbacks -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11">
<!-- Favicon -->
<?php if( ot_get_option( 'ut_favicon' ) ) : ?>
<?php
/* get icon info */
$favicon = ot_get_option( 'ut_favicon' );
$favicon_info = pathinfo( $favicon );
$type = NULL;
if( isset($favicon_info['extension']) && $favicon_info['extension'] == 'png' ) {
$type = 'type="image/png"';
}
if( isset($favicon_info['extension']) && $favicon_info['extension'] == 'ico' ) {
$type = 'type="image/x-icon"';
}
if( isset($favicon_info['extension']) && $favicon_info['extension'] == 'gif' ) {
$type = 'type="image/gif"';
}
?>
<link rel="shortcut icon" href="<?php echo $favicon; ?>" <?php echo $type; ?> />
<link rel="icon" href="<?php echo $favicon; ?>" <?php echo $type; ?> />
<?php endif; ?>
<!-- Apple Touch Icons -->
<?php if( ot_get_option( 'ut_apple_touch_icon_iphone' ) ) :?>
<link rel="apple-touch-icon" href="<?php echo ot_get_option( 'ut_apple_touch_icon_iphone' ); ?>">
<?php endif; ?>
<?php if( ot_get_option( 'ut_apple_touch_icon_ipad' ) ) : ?>
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo ot_get_option( 'ut_apple_touch_icon_ipad' ); ?>" />
<?php endif; ?>
<?php if( ot_get_option( 'ut_apple_touch_icon_iphone_retina' ) ) : ?>
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo ot_get_option( 'ut_apple_touch_icon_iphone_retina' ); ?>" />
<?php endif; ?>
<?php if( ot_get_option( 'ut_apple_touch_icon_ipad_retina' ) ) :?>
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo ot_get_option( 'ut_apple_touch_icon_ipad_retina' ); ?>" />
<?php endif; ?>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<?php
/*
|--------------------------------------------------------------------------
| Needed Settings
|--------------------------------------------------------------------------
*/
$scrollto = ot_get_option('ut_scrollto_effect');
$scrollto = !empty( $scrollto['easing'] ) ? $scrollto['easing'] : 'linear' ;
$scrollspeed = ot_get_option('ut_scrollto_speed' , '650');
$ut_site_border_body_class = ot_get_option( 'ut_site_border', 'hide' ) == 'show' ? 'ut-site-border' : '';
$ut_site_top_header_body_class = ot_get_option( 'ut_top_header', 'hide' ) == 'show' ? 'ut-has-top-header' : '';
$ut_site_border_header_class = ot_get_option( 'ut_site_border', 'hide' ) == 'show' ? 'bordered-navigation' : '';
$ut_top_header_class = ot_get_option( 'ut_top_header' , 'hide' ) == 'show' ? 'bordered-top' : '';
?>
<body id="ut-sitebody" class="error404 " data-scrolleffect="easeInOutExpo" data-scrollspeed="1300">
<a class="ut-offset-anchor" id="top" style="top:0px !important;"></a>
<?php
/*
|--------------------------------------------------------------------------
| Pre Loader Overlay
|--------------------------------------------------------------------------
*/
if( ot_get_option('ut_use_image_loader') == 'on' ) :
if( ut_dynamic_conditional('ut_use_image_loader_on') ) : ?>
<div class="ut-loader-overlay"></div>
<?php endif; ?>
<?php endif; ?>
<?php ut_before_header_hook(); // action hook, see inc/ut-theme-hooks.php ?>
<?php
/*
|--------------------------------------------------------------------------
| Navigation Setting
|--------------------------------------------------------------------------
*/
/* skin */
$ut_navigation_skin = ot_get_option('ut_navigation_skin' , 'ut-header-light');
/* visibility */
$headerstate = NULL;
if( is_home() || is_front_page() || is_singular('portfolio') || get_post_meta( get_the_ID() , 'ut_activate_page_hero' , true ) == 'on' ) {
if( ot_get_option('ut_navigation_state' , 'off') == 'off' ) {
$headerstate = 'ha-header-hide';
}
}
/* width */
$navigation_width = ot_get_option('ut_navigation_width' , 'centered');
$logo_push = ( $navigation_width == 'fullwidth' ) ? 'push-5' : '';
$navigation_pull = ( $navigation_width == 'fullwidth' ) ? 'pull-5' : '';
/* main navigation settings*/
$mainmenu = array('echo' => false,
'container' => 'nav',
'container_id' => 'navigation',
'fallback_cb' => 'ut_default_menu',
'container_class' => 'grid-80 hide-on-tablet hide-on-mobile ' . $navigation_pull ,
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'primary',
'walker' => new ut_menu_walker()
);
/* mobile navigation settings */
$mobilemenu = array('echo' => false,
'container' => 'nav',
'container_id' => 'ut-mobile-nav',
'menu_id' => 'ut-mobile-menu',
'menu_class' => 'ut-mobile-menu',
'fallback_cb' => 'ut_default_menu',
'container_class' => 'ut-mobile-menu mobile-grid-100 tablet-grid-100 hide-on-desktop',
'items_wrap' => '<div class="ut-scroll-pane"><ul id="%1$s" class="%2$s">%3$s</ul></div>',
'theme_location' => 'primary',
'walker' => new ut_menu_walker()
);
/* check if current page has an option tp show a hero */
//$ut_activate_page_hero = get_post_meta( get_the_ID() , 'ut_activate_page_hero' , true );
$ut_activate_page_hero= false // --------------------------------------------------------------------------------------------------------------------------------------------------not sure what this returns....
?>
<!-- commented out ----------------------------------------------------->
<?php // get_template_part( 'partials/top', 'header' ); ?>
<!-- header section -->
<header id="header-section" class="ha-header fullwidth ut-header-light ">
<?php if( $navigation_width == 'centered' ) :?>
<div class="grid-container">
<?php endif; ?>
<div class="ha-header-perspective">
<div class="ha-header-front">
<div class="grid-20 tablet-grid-50 mobile-grid-50 <?php echo $logo_push; ?>">
<?php if ( get_theme_mod( 'ut_site_logo' ) ) : ?>
<?php
$sitelogo = !is_front_page() && !is_home() && ( $ut_activate_page_hero == 'off' || empty($ut_activate_page_hero) ) ? get_theme_mod( 'ut_site_logo_alt' ) : get_theme_mod( 'ut_site_logo' );
$alternate_logo = get_theme_mod( 'ut_site_logo_alt' ) ? get_theme_mod( 'ut_site_logo_alt' ) : get_theme_mod( 'ut_site_logo' ) ;?>
<div class="site-logo">
<img data-altlogo="<?php echo $alternate_logo; ?>" src="<?php echo $sitelogo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</div>
<?php else : ?>
<div class="site-logo">
<h1 class="logo"><?php bloginfo( 'name' ); ?></h1>
</div>
<?php endif; ?>
</div>
<?php
/* main and mobile menu cache */
if( ot_get_option('ut_use_cache' , 'off') == 'on' ) {
$language_prefix = defined('ICL_LANGUAGE_CODE') ? '_' . ICL_LANGUAGE_CODE : '';
$main_menu = get_transient('ut_main_menu' . get_the_ID() . $language_prefix );
$mobile_menu = get_transient('ut_mobile_menu' . get_the_ID() . $language_prefix );
$cacheTime = ot_get_option('ut_cache_ltime' , '10');
if ($main_menu === false) {
$main_menu = wp_nav_menu( $mainmenu );
set_transient('ut_main_menu' . get_the_ID() . $language_prefix , $main_menu, 60*$cacheTime);
}
if ($mobile_menu === false) {
$mobile_menu = wp_nav_menu( $mobilemenu );
set_transient('ut_mobile_menu' . get_the_ID() . $language_prefix , $mobile_menu, 60*$cacheTime);
}
} else {
$main_menu = wp_nav_menu( $mainmenu );
$mobile_menu = wp_nav_menu( $mobilemenu );
} ?>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php echo $main_menu; ?>
<div class="ut-mm-trigger tablet-grid-50 mobile-grid-50 hide-on-desktop">
<button class="ut-mm-button"></button>
</div>
<?php echo $mobile_menu; ?>
<?php endif; ?>
</div>
</div><!-- close .ha-header-perspective -->
<?php if( $navigation_width == 'centered') :?>
</div>
<?php endif; ?>
</header><!-- close header -->
<div class="clear"></div>
<!-- Commented this out too --------------------->
<?php// get_template_part( 'template-part', 'hero' ); ?>
<!-- just in case commented this out-->
<?php // ut_before_content_hook(); // action hook, see inc/ut-theme-hooks.php ?>
<div id="main-content" class="wrap ha-waypoint" data-animate-up="ha-header-hide" data-animate-down="ha-header-small">
<a class="ut-offset-anchor" id="to-main-content"></a>
<div class="main-content-background">
I believe it goes somewhere here. The website is hosted locally via MAMP.
lets say images are:
localhost:port/uploads/headerbackground.jpg
localhost:port/uploads/logo.psd
how could I add header background and logo on the header?
<body <?php body_class(); ?>>
<?php woo_top(); ?>
<div id="wrapper">
<div id="top">
<nav class="col-full" role="navigation">
<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
<?php } ?>
<?php
if ( class_exists( 'woocommerce' ) ) {
echo '<ul class="nav wc-nav">';
woocommerce_cart_link();
echo '<li class="checkout">'.__('Checkout','woothemes').'</li>';
echo get_search_form();
echo '</ul>';
}
?>
</nav>
</div><!-- /#top -->
<?php woo_header_before(); ?>
<header id="header" class="col-full">
<hgroup>
<?php
$logo = esc_url( get_template_directory_uri() . '/images/logo.png' );
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' && is_ssl() ) { $logo = preg_replace("/^http:/", "https:", $woo_options['woo_logo']); }
?>
<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
<a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( get_bloginfo( 'description' ) ); ?>">
<img src="<?php echo $logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
</a>
<?php } ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<h3 class="nav-toggle"><mark class="websymbols">²</mark> <span><?php _e('Navigation', 'woothemes'); ?></span></h3>
</hgroup>
<?php woo_nav_before(); ?>
In general, I want to do this instead of that
Any help would be appreciated.
You can't add a PSD file like that. It's a Photoshop file that needs saving into something like JPG or PNG
Also looks like your Woo theme has that inbuilt functionality so check the settings
For header background image:
Navigate to Appearance > Header within the WordPress administration and check for "Header Image" and then upload your headerBackgroung image.
for PSD:You can't add a PSD for your logo.you can create logo image from psd and then you can upload