Hi there,

I am currently building a wordpress site and have downloaded a responsive theme that seems easy (for the most part) to work with.

However, I need to make a fairly big change and have little idea of how to do it. The website in question is dev.rjthompsonmusic.com

If you look at that site, you'll see that there is a search box in the header next to the social icons. I want to replace this search bar with a Mailchimp email subscribe box, whilst retaining the minimalist look and responsive design of it. How would I go about doing this correctly?

Basically I just want to change the search box into a field where you can enter your email address and either press enter, or press a submit button, and it'll send the subscription info to Mailchimp.

Here's the header.php file:

<!DOCTYPE html> 
<!--[if lt IE 7 ]>               <html class="no-js ie ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>                  <html class="no-js ie ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>                  <html class="no-js ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->   <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(''); ?></title>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

    <script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic|Fjalla+One' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="<?php echo get_template_directory_uri(); ?>/js/ie/selectivizr.js"></script>
    <![endif]-->

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php echo wpb_page_background_image(); ?>

<div class="body-wrapper">

    <header id="header">

        <?php if ( wpb_option('header-widget-ads') ): ?>
            <div class="ads-header group">
                <div class="container">
                    <div class="grid one-full">
                        <ul><?php dynamic_sidebar('widget-ads-header'); ?></ul>
                    </div>
                </div>
            </div><!--/.ads-header-->
        <?php endif; ?>

        <?php if ( has_nav_menu( 'header' ) ): ?>
            <nav class="nav-container group" id="nav-header">
                <div class="nav-toggle" id="nav-header-toggle"><i class="icon-reorder"></i></div>
                <div class="nav-wrap">
                    <?php wp_nav_menu( array('theme_location'=>'header','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?>
                </div>
            </nav><!--/#nav-header-->
        <?php endif; ?>

        <div class="container">
            <div class="pad group">      
                <?php echo wpb_site_name(); ?>
                <?php echo wpb_site_desc(); ?>       

                <?php if ( !wpb_option('disable-header-search') ): ?>
                    <div id="header-search" class="group"><?php get_search_form(); ?></div>
                <?php endif; ?>

                <?php if ( !wpb_option('disable-header-social') ): ?>    
                    <?php echo wpb_social_media_links(array('id'=>'header-social','class'=>'social-module')); ?>
                <?php endif; ?>          
            </div>

            <?php if ( is_home() || is_single() || is_archive() ) get_template_part('partials/newsflash'); ?>

            <?php if ( has_nav_menu( 'subheader' ) ): ?>
                <nav class="nav-container group" id="nav-subheader">
                    <div class="nav-toggle" id="nav-subheader-toggle"><i class="icon-reorder"></i></div>
                    <div class="nav-wrap">
                        <?php wp_nav_menu( array('theme_location'=>'subheader','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?>
                    </div>
                </nav><!--/#nav-subheader-->
            <?php endif; ?>

        </div><!--/.container-->

    </header><!--/#header-->

    <div id="page">
        <div class="container">
            <div class="container-inner">

and here is the Mailchimp generated form code:

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://rjthompsonmusic.us4.list-manage.com/subscribe/post?u=86729b354d1a75a35e8fd9771&amp;id=bd9f282fc3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <label for="mce-EMAIL">Subscribe to our mailing list</label>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->

Remember, I literally just want the email field with some text asking people to enter their email address and press enter. It should look almost identical, but with different functionality.

Any help would be amazing.

HT

Take lines 2-4 and line 7 from the MC code and drop them in at line 23 of header.php (i.e., right before wp_head()). Then on line 60 of header.php change

<div id="header-search" class="group"><?php get_search_form(); ?></div>

to

<div id="header-search" class="group">
    <div id="mc_embed_signup">
        <form action="http://rjthompsonmusic.us4.list-manage.com/subscribe/post?u=86729b354d1a75a35e8fd9771&amp;id=bd9f282fc3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <label for="mce-EMAIL">Subscribe to our mailing list</label>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </form>
    </div>
    <!--End mc_embed_signup-->
</div>

Please note this is just one way to do this. It also looks like your theme has an option for "Disable Header Search" based on the code. If you turn this feature off, the MC code won't appear.

Great, thanks for the reply. I'll try it a little later tonight. If you know of a way to do this with php to keep it more in track with the rest of the code, that would be great too, but if not, no worries.

Thanks again for the reply.

And will this visually look the same as the search box, only with an email sign up instead, or will I have to figure out the styling of it? Ideally, I want it to look exactly the same as it currently does but with different text (i.e. "enter your email address and press enter"), no little search icon, and obviously the different functionality.

There is no PHP needed. The server-side processing happens once the form is submitted, on MC's side. You just need the HTML structure for the form.

Regarding the visual aspect, you will likely need to do some styling on your own. You probably won't have a search icon, and the <label> in the code above indicates that's it's an e-mail subscription form, so that's a start. Whatever else you want to do with fonts, layout, etc., is up to your styling. If you want to mimic the search form's styles, I'd recommend using Firebug to reverse engineer the styles from all the search form elements before you replace them.

OK, great. Thanks for your help. I'm sure I'll have a few more questions, but for now, thanks very much.

You're welcome. Please mark the thread as Solved if you're all set here.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.