The line above was in response to the previous q’s.
With regards to modifying the header.php, I did not touch it in the parent theme, no.
I do need to address that issue with another file, that I did touch to create the posts in two columns on the homepage, but I can’t remember how I did that, so I’ll have to wait until it comes back to me.
Can you post the header.php you are using? (from the parent if you don’t have one in the child?)
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<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' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/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">
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="main" class="wrapper">
That IS a modified version…the header image is below the navigation in default…
Anyway, you need to make a copy of this file and put it in the child theme and add this:
<div class="socialicons">
<a href="URL FOR THE LINKED TO PAGE">
<img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
</a>
<a href="URL FOR THE LINKED TO PAGE">
<img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
</a>
<a href="URL FOR THE LINKED TO PAGE">
<img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
</a>
<a href="URL FOR THE LINKED TO PAGE">
<img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
</a>
<a href="URL FOR THE LINKED TO PAGE">
<img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
</a>
<a href="URL FOR THE LINKED TO PAGE">
<img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
</a>
</div>
between these two lines:
<?php endif; ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
You’ll need to replace the ALL CAPS TEXT in each of those sections with the relevant URLS for each social icon image and the link to the page for each one.
Also add this to the child theme CSS:
.socialicons {
float: right;
width: 200px;
}
.socialicons img {
float: left;
}
We’ll have to adjust this CSS after we see the other in place…
doing this now. can’t thank you enough
any idea why it created a new header underneath the original header?
internalcompass.us/castle
Possibly because the header.php code you posted wasn’t actually the one on your site or the one you modified – since there seems to be some confusion about that. Can you post the header.php file you now have in the child theme – and again, you MUST use the code buttons when posting code here – that means click the code button – then paste the code and then click it again to get a closing code backtick.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<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' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/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">
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
<div class="socialicons">
<a href="https://www.facebook.com/travelwithacastle">
<img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/fb.jpg" alt="fb" />
</a>
<a href="URL FOR THE LINKED TO PAGE">
<img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/instagram.jpg" alt="insta" />
</a>
<a href="http://pinterest.com/travlwithcastle/">
<img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/pinterest.jpg" alt="pinterest" />
</a>
<a href="www.youtube.com">
<img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/rss.jpg" alt="rss" />
</a>
<a href="https://twitter.com/travlwithcastle">
<img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/twitter.jpg" alt="twiiter" />
</a>
<a href="www.youtube.com">
<img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/you-tube.jpg" alt="you-tube" />
</a>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="main" class="wrapper">
I don’t see a double header image, but your code for the new icons is not right and it’s incomplete. The image links aren’t valid links – try putting the url in a browser window…
Have you uploaded those icon images using the media uploader? Once you do that, copy the URL for the image into the img src="..."
do you see the icons on the right and how they are underneath the main header image? i’d really like them up higher — layered on top of the white space of my main header image. is that possible?
i did not insert the main header image in a php file. i just uploaded through the appearances menu in the dashboard under header as a jpg.
i did go in and add the icons to the media library as you suggested. i had them stored elsewhere online previously — sounds like only i could view them and they weren’t showing up for you.
internalcompass.us/castle
Yep, now we can adjust the CSS – try changing this:
.socialicons {
float: right;
width: 200px;
}
to:
@media screen and (min-width: 600px) {
.socialicons {
float: right;
margin-top: -105px;
position: relative;
width: 200px;
}
}
`
That looks really good, BTW :).
