Making a header with WYSIJA/mail poet form?
-
Hi you smart wordpress gurus,
I am trying to figure out if I can integrate a WYSIJA subscription form into my header. I know they give php when you create a form, but I don’t know
-Where I would put in the code
-where the form would end up after I put the code inI use 2011 right now, I am contemplating switching to a premium theme by studiopress at some point in the not too distant future.
I am also wondering, if I were able to, say, take out the search bar and put my form in place of that, if someone were viewing on mobile or just way smaller computer screens and I had text telling people to sign up in my header image would it end up shrinking the same amount, or would it just look totally dumb? I wish I could put a sign up form IN my header image.
I did make a child header php in order to insert a favicon into my site, but I am slightly helpless when it comes to code, so I need massive baby steps.
-
You can certainly modify the header.php file in your child theme and put a form there.
And you can add CSS to make it behave properly on smaller devices too.
Can you post your header.php file (be sure to use the code buttons) and also a link to the form you want to add to it (maybe put that form in a page for now).
Yay, thank you for your help.
Ok, I’m even worse off than I thought.
I thought I created a child header.php (Now I’m not even sure if that exists?) but I can’t seem to find it. I am looking in my filezilla stuff. I don’t know if I am way over my head in wanting to do this. Maybe I had changed the favicon in functions.php? or the ehader I am seeing admin header and custom header, but nothing that is just header.php
Ok, what I created for the favicon was index.php child, I believe.
Okay, so then you just need to now put a copy of the header.php file in your child theme and we’ll change that. If it’s unchanged, I can look at the original – no need to post it. But where do you want the sign-up form and do you have the code for that ready?
You could ask on the WYSIJA forum if you need help with that part.
I’m kinda tight on time at the moment, but I’ll check back here as soon as I can – but you can get started on the above anyway, and someone else may jump in as well.
Ah, don’t worry about being speedy, I so appreciate your help in the first place.
Ideally, I’d love to take the search bar out and put a simple email and sign up button in it’s place and then make a header that said about the site and to sign up with an arrow pointing down to the form. I’m not sure, at this point, if that is just wishful thinking or if I am capable of that.
Here is the php for the form
$widgetNL = new WYSIJA_NL_Widget(true); echo $widgetNL->widget(array('form' => 8, 'form_type' => 'php'));The only thing I’m not sure about it is right now it’s still vertical. I looked it up and saw a WYSIJA guy say that you could use css to make it horizontal. He gave this code:
#home-welcome p, #home-welcome .form-valid-sub input[type="submit"] { display: inline; margin-left: 6px; }But I have no idea where the code goes.
To add to my utter suckage when it comes to this stuff: I don’t think I know how to put a copy of the header.php in the child theme.
LOL – no problem on any of this – that’s why we’re here :). Really. So you can’t move a file from the dashboard – you’ll need to use FTP or another file manager your host uses. Did you use that when you set up the child theme?
(And now I really am going to the bank before it closes – LOL!)
Yes I have filezilla. I have a child for twentyeleven and I guess I made a functions.php when I was doing the favicon stuff (The reason I am not remembering this is because my brother was helping me, as well).
I see the original header.php in the original twentyeleven theme but can’t view the code to make a new header.php with the same info for the child (I have no idea if that is even what I am supposed to do). There is an option to download the original header.php file, but I don’t know if that is what I am supposed to do? Am I just supposed to create a new file in the child called header.php? That I could do for sure 🙂
^Even this stuff up here would have been a foreign language to me about 2 months ago, so at least I am progressing!
I figured out how to view original and copied that into a new header.php in my child theme but that screwed with my site so I deleted it. Not sure what I did wrong!
What got messed up? You might need to clear your browser cache and possibly redo theme settings/options for the header image.
Can you post that file here – I’m not on a great computer right now for this kind of stuff.
The whole thing?
<?php /** * Header template for the 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" /> <title><?php // Print the <title> tag based on what is being viewed. global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) ); ?></title> <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"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <?php // Check to see if the header image has been removed $header_image = get_header_image(); if ( $header_image ) : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { /* * We need to figure out what the minimum width should be for our featured image. * This result would be the suggested width if the theme were to implement flexible widths. */ $header_image_width = get_theme_support( 'custom-header', 'width' ); } else { $header_image_width = HEADER_IMAGE_WIDTH; } ?> <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 : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { $header_image_width = get_custom_header()->width; $header_image_height = get_custom_header()->height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?> <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 ( $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 assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access --> </header><!-- #branding --> <div id="main">There were still some elements of my site there but the format was screwed up and the menu was all off.
Try it again make sure you clear your browser cache after you add it. Try redoing the header and menu settings in the child theme – i.e. reupload the image and reselect the custom menu.
Also how are you copying it and uploading it? You need to use a plain text editor (not Word – which corrupts code).
I was doing it inside of filezilla. It has the capability of creating a file inside of the ftp (if that is what it is called) so I copied it from the original header.php and made a new file inside of my child theme in filezilla.
I just re-did it and it seems to be working now. I have no idea what I did differently because I haven’t re-uploaded anything or cleared the cache yet. Weird.
At least I have the header.php in my child now!
Great! So now replace what’s in that file with this version – make sure that you don’t create empty white space at the top of the file – that can cause problems:
<?php /** * Header template for the 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" /> <title><?php // Print the <title> tag based on what is being viewed. global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) ); ?></title> <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"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <?php // Check to see if the header image has been removed $header_image = get_header_image(); if ( $header_image ) : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { /* * We need to figure out what the minimum width should be for our featured image. * This result would be the suggested width if the theme were to implement flexible widths. */ $header_image_width = get_theme_support( 'custom-header', 'width' ); } else { $header_image_width = HEADER_IMAGE_WIDTH; } ?> <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 : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { $header_image_width = get_custom_header()->width; $header_image_height = get_custom_header()->height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?> <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 ( $header_image ) : ?> with-image<?php endif; ?>"> </div> <?php else : ?> <div id="subform"><?php $widgetNL = new WYSIJA_NL_Widget(true); echo $widgetNL->widget(array('form' => 8, 'form_type' => 'php')); ?> </div> <?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 assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access --> </header><!-- #branding --> <div id="main">And then add this to your style.css file:
#branding #subform { bottom: -27px; max-width: 195px; top: auto; position: absolute; right: 7.6%; text-align: right; } #home-welcome p, #home-welcome .form-valid-sub input[type="submit"] { display: inline; margin-left: 6px; }Not totally sure this will work – can’t test it completely from where I am – but let’s see.
It took away the search bar, but there is no sign up form for WYSIJA.
Cool that the search bar is gone, though!
- The topic ‘Making a header with WYSIJA/mail poet form?’ is closed to new replies.