I've downloaded the MetaSlider plugin for WordPress, and am able to insert the generated code into my theme's header.php files so that the slider displays in the correct location. However, the site logo and description disappear when I do this (they should be overlaying the header image). Here's the code for the header.php file:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Preloader -->
<?php get_template_part( 'templates/header/preloader' ); ?>
<!-- Page Wrapper -->
<div id="page-wrap">
<!-- Boxed Wrapper -->
<div id="page-header" <?php echo esc_attr(ashe_options( 'general_header_width' )) === 'boxed' ? 'class="boxed-wrapper"': ''; ?>>
<?php
// Top Bar
get_template_part( 'templates/header/top', 'bar' );
// Page Header
get_template_part( 'templates/header/page', 'header' );
// Main Navigation
get_template_part( 'templates/header/main', 'navigation' );
?>
</div><!-- .boxed-wrapper -->
<!-- Page Content -->
<div id="page-content">
<?php get_template_part( 'templates/sidebars/sidebar', 'alt' ); // Sidebar Alt ?>
To get the slider into the correct location I need to replace the code underneath //Page Header with the code that Meta Slider provides. The Problem, I think, is that it's replacing the Header Template. So, I've looked at the php for the header template as well, but I'm not sure what, if anything, I might do in there to fix the issue. Here's the header template code:
<div class="entry-header">
<div class="cv-outer">
<div class="cv-inner">
<div class="header-logo">
<?php
if ( has_custom_logo() ) :
$custom_logo_id = get_theme_mod( 'custom_logo' );
$custom_logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( bloginfo('name') ); ?>" class="logo-img">
<img src="<?php echo esc_url( $custom_logo[0] ); ?>" alt="<?php esc_attr( bloginfo('name') ); ?>">
</a>
<?php else : ?>
<?php echo bloginfo( 'title' ); ?>
<?php endif; ?>
<br>
<p class="site-description"><?php echo bloginfo( 'description' ); ?></p>
</div>
</div>
</div>
</div>
Any ideas as to how I might go about fixing this would be much appreciated!!
Have you try to give position:relative; z-index:9999;//z-index number depends to your logo and description?
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
}
?>
This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 5 years ago.
I'm new here and I'm not sure how to properly ask this question.My goal is to change href for my logo in wordpress, there's no easy setting within wordpress so I decided to change code itself. error that I got is "Parse error: syntax error, unexpected '<' in /home/gtacontr/public_html/mississaugacardetailing.ca/blog/wp-content/themes/publisherly/header.php on line 38". Below is my code, can someone please tell me why I got this error and how can I fix it
<?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 Publisherly
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'publisherly' ); ?></a> <!-- add this reference in code -->
<header id="masthead" class="site-header" role="banner">
<div class="header-wrapper">
<div class="site-branding">
<a href="http://www.mississaugacardetailing.ca">
//<?php
// Display the Custom Logo
<img width="2000" height="666" src="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png" class="custom-logo" alt="" itemprop="logo" srcset="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png 2000w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-300x100.png 300w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-768x256.png 768w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-1024x341.png 1024w" sizes="(max-width: 2000px) 100vw, 2000px"></a>
/* if ( has_custom_logo() ) {
the_custom_logo();
} else {
if ( is_front_page() && is_home() ) : ?>
</a>
<h1 class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></p>
<?php endif;
}
?> */
</div><!-- .site-branding -->
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<a id="menu-toggle" class="menu-toggle" href="#"><!-- <i class="fa fa-bars"></i>--> <?php _e( 'Menu', 'publisherly' ); ?></a>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'publisherly' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
</div><!-- .site-header-menu -->
<?php endif; ?>
</div><!-- /header-wrapper -->
</header><!-- .site-header -->
You should comment it this way
<!--?php // Display the Custom Logo -->
<img width="2000" height="666" src="..." sizes="(max-width: 2000px) 100vw, 2000px"></a>
<!-- if ( has_custom_logo() ) {
the_custom_logo();
} else {
if ( is_front_page() && is_home() ) : ?>
</a>
<h1 class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></h1>
<!--?php else : ?>
<p class="site-title"> rel="home"><?php bloginfo( 'name' ); ?></p>
<?php endif;
}
?-->
If you notice I just changed the tags so <?php becomes <!--?php and ?> becomes ?-->. This is just a personal prefrenace because it helps me remember where things are, if you left the PHP tags intact they would work as PHP but the output would be inside a comment. I do the same with HTML such as:
<!-- form id="myfrom" action="" >
</form -->
NOTE That said if this is a live site, I might just leave the PHP alone, as you don't want that code displaced in the source for the page.
Here is a sand box that shows what you have wrong sandbox
Cheers.
You need to change near to "" tag inside anchor() tag and make sure you need to comment it or you need to remove this tag if not need. and also remove anchor tag after image tag. please see below code.
<a href="http://www.mississaugacardetailing.ca">
<!--?php
// Display the Custom Logo
?-->
<img width="2000" height="666" src="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png" class="custom-logo" alt="" itemprop="logo" srcset="http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo.png 2000w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-300x100.png 300w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-768x256.png 768w, http://www.mississaugacardetailing.ca/blog/wp-content/uploads/2017/06/cardetailinglogo-1024x341.png 1024w" sizes="(max-width: 2000px) 100vw, 2000px">
<!--?php /* if ( has_custom_logo() ) {
the_custom_logo();
} else {
if ( is_front_page() && is_home() ) : ?-->
</a>
My website is www.rosstheexplorer.com.
I want to have a separate customer header when the site loads on mobile devices, so below 600px and above 601px.
I have attempted to change my header.php code to accomplish this but nothing I have tried has sorted the problem.
Here is my header.php code
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package Penscratch
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
</a>
<?php endif; // End header image check. ?>
These are the two key lines
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
As #Michael Coker noted above in the comments
add a CSS class to the 'img' tag for mobile displays
You can then use the class selector - .mobile-header-img in my example below - To hide the mobile header if the screen is bigger than 660px
Then do the opposite for the other image to hide the large image from small displays
See the code below:
#media screen and (min-width: 660px) {
.mobile-header-img {
display: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
The easiest way to do this is to have one container element (such as a <div>) to hold the header image. Use CSS to assign the background property of this element to one of the images. You can then use media queries in the CSS to adjust the background property (image) as necessary.
I am a beginner in WP. I want different logo in each page of word press site like for few page of the site i need different logo and different for other. i tried to use conditional statement but as i am beginner so my overall site crashes and have a blank screen. if there is some plugin that can achieve this kind of functionality it would be really a great help.
Can you guide me how to achieve it.
Here is my header.php code i tried to edit it but all in vain.
<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' ); ?>" />
<meta name="viewport" content="initial-scale=1">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/source/vendor/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="container">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="site-branding">
<!--Editing start from here and i am gona delete all other code from above span section-->
<?php $header_image = get_header_image(); ?>
<h1 class="site-title">
<?php if ( ! empty( $header_image ) ) : ?>
<img src="<?php echo $header_image ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
<span><?php bloginfo( 'name' ); ?></span>
</h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<nav id="site-navigation" class="site-primary-navigation slide-left">
<i class="icon-cancel-circled"></i> <span><?php _e( 'Close', 'jobify' ); ?></span>
<?php get_search_form(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu-primary' ) ); ?>
</nav>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<i class="icon-menu"></i>
<?php endif; ?>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
Thanks
Try using something like this.
if(is_page('Blog')){ // the parameter used here is the post_title
echo '<img src="http://yourwebsite.com/path-to-your-image/blog-logo.png" />';
}elseif(is_page('home')){ // the parameter used here is the post slug
echo '<img src="http://yourwebsite.com/path-to-your-image/home-logo.png" />';
}elseif(is_page('42')){ // the parameter used here is the post id
echo '<img src="http://yourwebsite.com/path-to-your-image/other-logo.png" />';
}else{ // else display default logo
$header_image = get_header_image();
}
You can get more info here:
https://codex.wordpress.org/Function_Reference/is_page
Depending on the theme you are using, it's sometimes build-in feature!
I know Arcade Basic which has this custom header feature:
https://wordpress.org/themes/arcade-basic/
There are probably much more theme's which supports this feature by default, search on the 'featured-image-header' and 'flexible-header' tags on the Wordpress site to find more themes....
https://wordpress.org/themes/tags/featured-image-header/
https://wordpress.org/themes/tags/flexible-header/
And maybe 'custom-header' tag?
https://wordpress.org/themes/tags/custom-header/
Finally, there are indeed a lot of plugins, like "WP Header Images", more can be found here:
https://wordpress.org/plugins/search.php?q=header+image&sort=
I want to hide the default Wordpress home page from my website navigation
http://www.dawaf.co.uk/es/portraits
I am using Twenty Eleven as the parent theme but I was wondering whether it was possible to do this using CSS rather than editing the header.php which doesn't seem to work when I remove any reference to 'home'
header.php
<?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>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<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();
?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<div class="site-title"><img src="http://www.dawaf.co.uk/es/wp-content/themes/child/images/photosdirector.png"></div>
<?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">
Your header.php is loading the menu dynamically from the Wordpress dashboard. Edit the menu here: Dashboard > Appearance > Menus