I want to put a logo in the header of a website. I use the theme "Snowbird". In the header.php I want to specify to Wordpress to place the logo a different place on the header, according to each page of the website.
This is the code I add to my header.php
<!DOCTYPE html>
<!--[if IE 9]>
<html class="ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 9]><!-->
<html <?php language_attributes(); ?>><!--<![endif]-->
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div class="xf__site hfeed">
<div class="content-area">
<div class="logo">
<img src="https://website/wp-content/uploads/2017/09/logo-website.png" alt="Logo" />
</div>
How can I do that ?
Best regard,
Lordaker
Use the body_class filter to add classes to the body element of specific pages and then use CSS to do the positioning.
PHP - functions.php
function wp_body_classes( $classes ) {
if ( is_page( 'Demo Page' ) ) {
$classes[] = 'demo-page';
}
return $classes;
}
add_filter( 'body_class', 'wp_body_classes' );
CSS
.demo-page .logo {
// position
}
Using a child theme version of Ambition. For some reason the sidebar is displaying at the bottom. How do I edit the child theme or page template to make the sidebar not display.
Here is the link to the live example: http://businessblessed.com/specialoffers/sales-pages/
Here is the page template code:
<?php
/*
Template Name: SQ w Img 2step
*/
?>
<?php
/**
* This file displays page with no sidebar.
*
* #package Theme Horse
* #subpackage Ambition
* #since Ambition 1.0
*/
?>
<!DOCTYPE html>
<!--[if IE 7 ]> <html lang="cs" class="ie7 no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="cs" class="ie8 no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="cs" class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="cs" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>GiveAway</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://businessblessed.com/wp-content/themes/virtue-child/squeeze-page-w-prodImage-2step-optin/css/style.css?v=1" media="screen, projection" />
<link rel="stylesheet" href="http://businessblessed.com/wp-content/themes/virtue-child/squeeze-page-w-prodImage-2step-optin/css/print.css?v=1" media="print" />
<link rel="shortcut icon" href="./favicon.ico" />
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
</head>
<body class="page-subpage">
<div id="main">
<div class="row-main">
<div class="col col-book">
<img src="http://businessblessed.com/wp-content/themes/virtue-child/squeeze-page-w-prodImage-2step-optin/img/book.png" alt="book" />
</div>
<div class="col col-content">
<div class="in">
<p class="read-this"><?php single_post_title(); ?></p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content( ); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</form>
<p class="secure">Your Information is 100% Secure And Will Never Be Shared With Anyone.</p>
<p class="legal">Legal Information</p>
</div>
</div>
</div>
</div>
<!--[if lte IE 8 ]>
<img src="http://businessblessed.com/wp-content/themes/virtue-child/squeeze-page-w-prodImage-2step-optin/img/bg.jpg" alt="" class="bg-ie" />
<![endif]-->
<script src="http://businessblessed.com/wp-content/themes/virtue-child/squeeze-page-w-prodImage-2step-optin/js/jquery.js?v=1"></script>
<script src="http://businessblessed.com/wp-content/themes/virtue-child/squeeze-page-w-prodImage-2step-optin/js/app.js?v=1"></script>
<script>
App.run({})
</script>
</body>
</html>
I also found a "no sidebar" template inside the parent theme, but I am not sure if it can be applied.
<?php
/**
* This file displays page with no sidebar.
*
* #package Theme Horse
* #subpackage Ambition
* #since Ambition 1.0
*/
?>
<?php
/**
* ambition_before_loop_content
*
* HOOKED_FUNCTION_NAME PRIORITY
*
* ambition_loop_before 10
*/
do_action( 'ambition_before_loop_content' );
/**
* ambition_loop_content
*
* HOOKED_FUNCTION_NAME PRIORITY
*
* ambition_theloop 10
*/
do_action( 'ambition_loop_content' );
/**
* ambition_after_loop_content
*
* HOOKED_FUNCTION_NAME PRIORITY
*
* ambition_next_previous 5
* ambition_loop_after 10
*/
do_action( 'ambition_after_loop_content' );
?>
Debug the_content()
var_dump(the_content()); and check for sidebar data,
Also You are doing wrong, Only the data after the body you have to write in template file.
Every WordPress theme provides page template with sidebar as well as no sidebar.
Here you can easily use the page template with no sidebar by copying it in your sidebar for your purpose and this will be the right way.
Normally WordPress uses get_sidebar() function to display sidebar so check and remove it from your template or can work with hooks like:
If added to a child theme's functions.php file, this will remove the footer sidebars registered by the TwentyTen theme.
function remove_some_widgets(){
// Unregister some of the TwentyTen sidebars
unregister_sidebar( 'first-footer-widget-area' );
unregister_sidebar( 'second-footer-widget-area' );
}
add_action( 'widgets_init', 'remove_some_widgets', 11 );
If this doesn't work then you can simply hide the sidebar using css by taking the body class within so that the sidebar will be hidden for only specific page for example:
.sales_page aside {
display : none;
}
But surely this should be the last option.
After hours of trying different things and codes, I came here to seek some help (I'm beginner in coding).
I'd like to put a full width and full height background image only in the header. The site is here: http://www.coveragenewstv.com/
Here is header.php :
<head>
<title><?php wp_title('|', true, 'right'); ?></title>
<meta charset="<?php bloginfo( 'charset' );?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
wp_head(); /** we hook up in wp_booster #see td_wp_booster_functions::hook_wp_head */
?>
</head>
<body <?php body_class() ?> itemscope="itemscope" itemtype="<?php echo td_global::$http_or_https?>://schema.org/WebPage">
<?php //this is closing in the footer.php file ?>
<?php /* scroll to top */?>
<div class="td-scroll-up"><i class="td-icon-menu-up"></i></div>
<div id="td-outer-wrap">
<div class="td-transition-content-and-menu td-mobile-nav-wrap">
<?php locate_template('parts/menu-mobile.php', true);?>
</div>
<?php //this is closing in the footer.php file ?>
<div class="td-transition-content-and-menu td-content-wrap">
<?php
td_api_header_style::_helper_show_header();
do_action('td_wp_booster_after_header'); //used by unique articles
Add two code-blocks to the bottom of your css file:
.td-banner-wrap-full, .td-header-menu-wrap-full {
background-color: transparent;
}
and
.td-header-wrap.td-header-style-1 {
background-image: url(http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg);
background-size: cover;
}
Replace the url to your background image url.
See: Works fine
I need to add custom urls to header. I edited Header.php and added this code:
<?php
print "<a href=localhost/URL1>URL1</a>/<a href=localhost/URL2>URL2</a>";
?> but for some reason URL1 and URL2 are not working.... Can someone help me with this problem?
EDIT: Here is header.php code
<?php
// Exit if accessed directly
if ( !defined('ABSPATH')) exit;
/**
* Header Template
*
*
* #file header.php
* #package Responsive
* #author Emil Uzelac
* #copyright 2003 - 2013 ThemeID
* #license license.txt
* #version Release: 1.3
* #filesource wp-content/themes/responsive/header.php
* #link http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
* #since available since Release 1.0
*/
?>
<!doctype html>
<!--[if !IE]> <html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', 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(); ?>>
<?php responsive_container(); // before container hook ?>
<div id="container" class="hfeed">
<?php responsive_header(); // before header hook ?>
<div id="header">
<?php responsive_header_top(); // before header content hook ?>
<?php if (has_nav_menu('top-menu', 'responsive')) { ?>
<?php wp_nav_menu(array(
'container' => '',
'fallback_cb' => false,
'menu_class' => 'top-menu',
'theme_location' => 'top-menu')
);
?>
<?php } ?>
<?php responsive_in_header(); // header hook ?>
<?php if ( get_header_image() != '' ) : ?>
<div id="logo">
<img src="<?php header_image(); ?>" width="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> width;} else { echo HEADER_IMAGE_WIDTH;} ?>" height="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> height;} else { echo HEADER_IMAGE_HEIGHT;} ?>" alt="<?php bloginfo('name'); ?>" />
</div><!-- end of #logo -->
<?php endif; // header image was removed ?>
<?php if ( !get_header_image() ) : ?>
<div id="logo">
<span class="site-name"><?php bloginfo('name'); ?></span>
<?php echo "<a href='www.google.com'>URL1</a>/<a href='www.google.com'>URL2</a>"?>;
<span class="site-description"><?php bloginfo('description'); ?></span>
</div><!-- end of #logo -->
<?php endif; // header image was removed (again) ?>
<?php get_sidebar('top'); ?>
<?php wp_nav_menu(array(
'container' => 'div',
'container_class' => 'main-nav',
'fallback_cb' => 'responsive_fallback_menu',
'theme_location' => 'header-menu')
);
?>
<?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>
<?php wp_nav_menu(array(
'container' => '',
'menu_class' => 'sub-header-menu',
'theme_location' => 'sub-header-menu')
);
?>
<?php } ?>
<?php responsive_header_bottom(); // after header content hook ?>
</div><!-- end of #header -->
<?php responsive_header_end(); // after header container hook ?>
<?php responsive_wrapper(); // before wrapper container hook ?>
<div id="wrapper" class="clearfix">
<?php responsive_wrapper_top(); // before wrapper content hook ?>
<?php responsive_in_wrapper(); // wrapper hook ?>
Ok here is code od header.php. I added custom URLs but they are not displayed on website.
You have placed the anchor tag for URL1 and URL2 in
if ( !get_header_image() )
which means it would show both the URLs only when there is no header image and if this is correct try placing the code inside
<?php if ( get_header_image() != '' ) : ?>
and also you are using the wrong form of the url you are using
<a href='www.google.com'>URL1</a>
but rather try using complete url which is
<a href='http://www.google.com'>URL1</a>
whats not working? does clicking link give 404?
if 404, then, as suggested, change href to a valid uri.
anything added to header.php will show on frontend, so only your href uri can be the issue, as far as the info you have provided for us goes.
Good Luck :)
I think this is an encoding problem(?), but not really sure.
When I view my generated source (in both FF and IE) I see funky paths from my js and css files like: <script type="text/javascript" src="http://www.domain.com/wp-content/themes/dudical/js/ce.f4195499d3cfc40ae09588aae02ff2dc.jquery,oeasing,omin,l.js"></script>
Also, several of the js/css files are actually being transcluded, i.e I don't see references to the external files, but instead the content of those files are being shown in the source inside of <script> and <style> tags respectively. I've never seen this type of behavior before and am pretty baffled.
Here is how my header.php file begins:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_front_page() ) {
bloginfo('name');
} elseif ( is_category() ) {
single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) {
single_post_title();
} elseif (is_page() ) {
single_post_title(); echo ' - '; bloginfo('name');
} else {
wp_title('',true);
} ?>
</title>
<?php if(get_option('favicon')) { ?>
<link rel="shortcut icon" href="<?php echo get_option('favicon'); ?>" type="image/x-icon" />
<?php }else{?><link rel="shortcut icon" href="<?php echo system32_url; ?>/favicon.ico" type="image/x-icon" /> <?php } ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
<!-- Jquery and Easing-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.capSlide.js"></script>
Here is what I see output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en lang=en>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1"/>
<title>Surf Hatteras</title>
<link rel="shortcut icon" href="http://www.surfhatteras.com/wp-content/uploads/2010/10/surf-icon.gif" type="image/x-icon"/>
<style>body { outline:none;}
.postoptions { padding:0px; padding-top:0; }
.postoptions select,
...
</style>
<style>/* CSS for WP-Testimonials */
#sfstest-form label {
float: left;
width: 200px;
font-weight: bold;
}
...
</style>
<script type='text/javascript' src='http://www.surfhatteras.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<link rel=EditURI type="application/rsd+xml" title=RSD href="http://www.surfhatteras.com/xmlrpc.php?rsd"/>
<link rel=wlwmanifest type="application/wlwmanifest+xml" href="http://www.surfhatteras.com/wp-includes/wlwmanifest.xml"/>
<link rel=index title='Surf Hatteras' href='http://www.surfhatteras.com/'/>
<meta name=generator content="WordPress 3.0.1"/>
<style>/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
...
</style>
<link rel=stylesheet type="text/css" href="http://www.surfhatteras.com/wp-content/themes/dudical/ce.51cd742ab6418eec6131ff2cf43b61c4.style,s.css"/>
<!-- Jquery and Easing-->
<script type="text/javascript" src="http://www.surfhatteras.com/wp-content/themes/dudical/js/ce.9e936b27d8d0e4e07ebef242d7c6e2cc.jquery-1,o4,omin,l.js"></script>
<script type="text/javascript">(function($) {
$.fn.capslide = function(options) {
var opts = $.extend({}, $.fn.capslide.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
...
})(jQuery);</script>
<link rel=stylesheet type="text/css" href="http://www.surfhatteras.com/wp-content/themes/dudical/colors/ce.d47db6d7bbcb1f0192576f60ffa27ec9.white,s.css" media=screen />
<!-- Slider CSS-->
<style>/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
#coin-slider { margin-left:20px;}
...
</style>
<link rel=stylesheet type="text/css" media=screen href="http://www.surfhatteras.com/wp-content/themes/dudical/css/cc.224c1b363a793961fc7bc2e428d6ce58.nivo-slider,s+superfish,s.css">
Can't figure what is happening to my paths, or why some external files are getting treated as such...
EDIT
List of plug-ins I am using:
Category Posts Widget
Contact Form 7
Contact Form 7 to DB Extension
Get Post Image
Get The Image
Resize At Upload Plus
Widgets Reloaded
WordPress Hashcash
WP-DBManager
WP-Mail-SMTP
WP Show IDs
WP Wunderground
(The caching plugin I was using is Quick Cache)
Contents of my functions.php file
It's not a big deal.
Just because you have using Goolge Page Speed extension mod.