WordPress.org

Ready to get started?Download WordPress

Forums

Making a header with WYSIJA/mail poet form? (27 posts)

  1. hannahmarieransom
    Member
    Posted 9 months ago #

    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 in

    I 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.

    http://holistichormonalhealth.com

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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).

  3. hannahmarieransom
    Member
    Posted 9 months ago #

    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

  4. hannahmarieransom
    Member
    Posted 9 months ago #

    Ok, what I created for the favicon was index.php child, I believe.

  5. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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.

  6. hannahmarieransom
    Member
    Posted 9 months ago #

    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.

  7. hannahmarieransom
    Member
    Posted 9 months ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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!)

  9. hannahmarieransom
    Member
    Posted 9 months ago #

    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!

  10. hannahmarieransom
    Member
    Posted 9 months ago #

    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!

  11. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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.

  12. hannahmarieransom
    Member
    Posted 9 months ago #

    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.

  13. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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).

  14. hannahmarieransom
    Member
    Posted 9 months ago #

    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!

  15. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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.

  16. hannahmarieransom
    Member
    Posted 9 months ago #

    It took away the search bar, but there is no sign up form for WYSIJA.

    Cool that the search bar is gone, though!

  17. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Did you add that CSS to the child theme style.css file? I don't see it.

  18. hannahmarieransom
    Member
    Posted 9 months ago #

    I did but maybe I messed it up. What was it supposed to do?

  19. hannahmarieransom
    Member
    Posted 9 months ago #

    I just tried again and don't notice anything different.. Hmm...

  20. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Oh, now it's there - probably my browser cache - sorry. I'm not sure why it's not working. Can you double check that the php code is correct?

  21. hannahmarieransom
    Member
    Posted 9 months ago #

    re-checked the php from the wysija form

    $widgetNL = new WYSIJA_NL_Widget(true);
    echo $widgetNL->widget(array('form' => 8, 'form_type' => 'php'));

    Still nothing...

  22. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Hi Hannah,
    Sorry I had to get off last night - and I'm about to be off for most of today as well - driving so no way to do this.

    But I'll try to get to my test site computer tonight and see if I can figure out what's wrong.

    You might also ask on the WYSIJA forum in case they can help you with this.

  23. hannahmarieransom
    Member
    Posted 9 months ago #

    Thanks. The topic is closed, but it looks like they want people to ask directly via their support. I am going to look into making a nice form to have UNDER the menu and above the posts and see what is easier and open a support ticket if needed.

  24. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Okay, yes, I posted that link just for the info about suppport - so see if they can help you. On my test site, a test php code from WYSIJA plugin did work in that location in the header.php file, so that's why I'm not sure if it's the code you have or something else.

  25. hannahmarieransom
    Member
    Posted 9 months ago #

    Weird. Maybe I will try another form or changing up that form. All I had was the email and submit button (bare minimum).

  26. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Yeah, I'd try another form to see if that works. Just replace the PHP code in the header file here:

    <div id="subform"><?php $widgetNL = new WYSIJA_NL_Widget(true);
    echo $widgetNL->widget(array('form' => 8, 'form_type' => 'php')); ?>
    </div>
  27. hannahmarieransom
    Member
    Posted 5 months ago #

    I just wanted to give an update on this thread because I see people going to my site because of it sometimes.

    I was never able to get the php to work.

    I bought a theme from studiopress that has a widgetized section up top that I put the shortcode into. I just used column classes (it's a genesis thing) and put my shortcode into the last of three columns :).

Reply

You must log in to post.

About this Topic