Adding a News Sign Up Box in Header – 2012

  • I’m programming a site using the Twenty Twelve Theme. I’d like to add a box for newsletter sign-up in the header — similar to how this site has hers: https://healthycrush.com/

    I’ve got a mailchimp account set up now (but it is only partially done, and I am willing to use any newsletter site frankly.) It looks to me like there is generally some shortcode you can add to a header.php file in a child theme that will possibly put a sign-up box in the header. I’d like to be able to control what the box looks like, though, so is that possible? Does it require more specific code or my using a different newsletter site?

    Thank you in advance to whomever has time to chime in. I am pasting the existing code of my header.php file in the child theme below – I am sure it’s required to answer anything. Also: the site is being developed at internalcompass.us/castle

    <?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="https://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://internalcompass.us/castle/wp-content/uploads/2013/07/fb.jpg" alt="fb" />
</a>

<a href="URL FOR THE LINKED TO PAGE">
<img src="https://internalcompass.us/castle/wp-content/uploads/2013/07/instagram.jpg" alt="insta" />
</a>

<a href="https://pinterest.com/travlwithcastle/">
<img src="https://internalcompass.us/castle/wp-content/uploads/2013/07/pinterest.jpg" alt="pinterest" />
</a>

<a href="www.youtube.com">
<img src="https://internalcompass.us/castle/wp-content/uploads/2013/07/rss.jpg" alt="rss" />
</a>

<a href="https://twitter.com/travlwithcastle">
<img src="https://internalcompass.us/castle/wp-content/uploads/2013/07/twitter.jpg" alt="twiiter" />
</a>

<a href="www.youtube.com">
<img src="https://internalcompass.us/castle/wp-content/uploads/2013/07/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">
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter dequecolour

    (@dequecolour)

    Can anyone chime in?

    Where do you envision that box? Your social icons are kind of in that place that the other site has the box…

    Have you looked at this?

    https://www.ads-software.com/plugins/mailchimp/

    Thread Starter dequecolour

    (@dequecolour)

    i think i’d like to try making the icons a tad bit smaller, each of them, and put them in a row of six. then the newsletter sign up would be above those icons. i love how you showed me to put them in the header, but they are a little big right now, and i want it to look professional. the header is still being designed although i am loving it more and more. even the scale of the world map i drew on the left and the site title is not set in stone.

    anyway — i’ve used a plugin for mail chimp in the sidebar, yes. it looked out of place bc it wasn’t customized to go with my site. it was grey with a random font that didn’t fit.

    i will live if it isn’t possible, but what i’d want ideally would be a box i drew, so that it could be black and white and be labeled with a font i chose, and then it would be programmed to connect to mailchimp (or any other valid bulk email site.) i know it must be possible to program generally bc i see sites with custom boxes. i just don’t know if it will work with twenty twelve’s header. i know this is a real niche question, so it’s just a shot in the dark.

    gracias!

    Yes, all of that is possible – it’s basically quite a bit of custom work so you may need to either learn more CSS or hire someone to do the work for you.

    Here’s a start on it:

    To move the icons, change this CSS:

    .socialicons {
    float: right;
    margin-top: -25px;
    position: relative;
    width: 300px;
}

    To add a box for the sign-up add the code below in the header.php file between these lines:

    <?php endif; ?>

NEW CODE GOES HERE

        <div class="socialicons">

    new code:

    <div id="signup">
THE CODE FOR THE SIGN UP FORM WILL GO HERE
</div>

    Then also add this CSS:

    #signup {
    float: right;
    width: 400px;
    height: 300px;
    border: black 1px solid;
}

    Those changes may need to be adjusted, but see how they look…

    Thread Starter dequecolour

    (@dequecolour)

    thanks for this. i have been experimenting with the social icons, and they now look like they are slightly underneath the actual header. can i move them up?

    internalcompass.us/castle

    can you help, or is there a resource you would point me to that might help me learn how to correct that? i tried editing the margin on the social icons code in css but that isn’t helping.

    This seems to work:

    .socialicons {
    float: right;
    margin-top: -40px;
    position: relative;
    width: 250px;
    z-index: 100;
}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding a News Sign Up Box in Header – 2012’ is closed to new replies.