Having trouble creating a WordPress Template. Please help!

7 replies
  • WEB DESIGN
  • |
Hi Warriors!

I'm stuck with a technical issue and I'm hoping you can help me.

I figured out how to create a PHP template page and apply it to a page. (Yay!)

I'm trying to create a new squeeze page similar to my home page (http://www/IAHWP.org), but without the video.

This is what it currently looks like:

International Association of Health and Wellness Professionals » Teleclass

I have two main problems with it:

1. The nav bar needs to be blanked out, exactly like on the home page.

This is a squeeze page for this call and I don't want to give my visitors any other option other than to sign up (or leave the page). So I want the nav bar blanked out.

I copied and pasted the homepage template and only changed what was necessary to create the new template. But the nav bar didn't blank out like it should have!

(My designer DID create a full-width template for me with the nav bar blanked out because I knew I'd want to create squeeze pages and not give my visitors any other option other than to sign up. In this case though, I want to have it laid out in two columns to bring the opt-in box up above the fold. So I'm using the homepage template.)

I did two things to test it:

a. I applied the home page template to this page and it looks fine: exactly like the homepage and the nav bar is blanked out.

b. I copied/pasted the homepage template into a new PHP document and uploaded it to my site (WITHOUT changing ANYTHING!) and applied the new template. When I do this, the home page appears exactly as it does on the home page, but the nav bar is still not blanked out!

Which tells me it's probably not the PHP file. Maybe something in the CSS file??? Do you have any idea?

I'm at a complete loss as to how to solve this and have no idea where else to look.

2. The second issue is the spacing between the two columns.

On the home page, it looks fine. But when I replace the video with text, it looks a little crowded. There needs to be more space between the two columns. Do you know how/where to do this?

Alternatively, I could take my full-width page template (which DOES blank out the nav bar) and modify it to display the content in two columns. But I'm not really familiar with PHP and when I look at the file, I can't tell WHERE exactly is the part that tells it to display the page with the nav bar blanked out.

I wouldn't know where to put the code in the full-width page template.

If you know PHP at all, here's the PHP code from my full-width page template:

<?php
/*
Template Name: Full Width Page
*/
?>
<?php get_header(); ?>

<div id="content" class="page col-full">
<!-- <div id="tagline" class="col-full">
<h3 class="title">XYZ title here</h3>
</div> -->
<div id="main" class="fullwidth">
<?php if ( function_exists(yoast_breadcrumb) ) { yoast_breadcrumb('<div id="breadcrumb"><p>','</p></div>'); } ?>
<?php if (have_posts()) : $count = 0; ?>
<?php while (have_posts()) : the_post(); $count++; ?>
<div class="section">
<div class="post">
<div class="entry">
<?php the_content(); ?>
</div><!-- /.entry -->
<?php edit_post_link( __('{ Edit }', 'woothemes'), '<span class="small">', '</span>' ); ?>
</div><!-- /.post -->
</div>
<?php $comm = get_option('woo_comments'); if ( ($comm == "page" || $comm == "both") ) : ?>
<?php comments_template(); ?>
<?php endif; ?>
<?php endwhile; else: ?>
<div class="section">
<div class="post">
<p><?php _e('Sorry, no posts matched your criteria.', 'woothemes') ?></p>
</div><!-- /.post -->
</div><!-- /.section -->
<?php endif; ?>
</div><!-- /#main -->
</div><!-- /#content -->
<?php get_footer(); ?>

I've been working on this for the last few hours and can't seem to figure it out. And I've played with it quite a bit.

I'd greatly appreciate any help!

Thanks,
Michelle
#creating #template #trouble #wordpress
  • Profile picture of the author Peter01
    If you want to remove the menu bar, look in the header.php
    {{ DiscussionBoard.errors[3451395].message }}
    • Profile picture of the author Nathan Hangen
      Looks like an easy fix. It's probably a mix of PHP and css div's. Shouldn't take long to fix.

      This is what it should look like in the source:


      <div id="navigation" class="col-full">

      </div><!-- /#navigation -->


      This is what it looks like now:


      <div id="navigation" class="col-full">
      <ul id="main-nav" class="nav fl"><li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-home menu-item-29"><a href="http://www.iahwp.org">Home</a></li>
      <li id="menu-item-148" class="menu-item menu-item-type-taxonomy menu-item-148"><a href="http://www.iahwp.org/category/blog/">Blog</a></li>
      <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-35"><a href="http://www.iahwp.org/membership/">Membership</a></li>
      <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-34"><a href="http://www.iahwp.org/resources/">Resources</a>
      <ul class="sub-menu">
      <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-82"><a href="http://www.iahwp.org/resources/teleclass/">Teleclass</a></li>
      </ul>
      </li>
      <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-83"><a href="http://www.iahwp.org/faculty/">Faculty</a></li>
      <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="http://www.iahwp.org/about/">About</a></li>
      <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="http://www.iahwp.org/media/">Media Desk</a></li>
      <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-31"><a href="http://www.iahwp.org/contact/">Contact</a></li>
      </ul>
      </div><!-- /#navigation -->


      Without access to your PHP, I can't tell what's causing it, but if you would like me to fix it for you for a small fee, send me a PM.
      {{ DiscussionBoard.errors[3451953].message }}
  • Profile picture of the author SteveJohnson
    This is terribly simple to fix.

    For the column spacing, you'll need to edit your post. The container that contains the text has some inline styling. Edit the post, click on the HTML tab. Find this:
    Code:
    <div style="float:left; display:inline; width:500px; height:400px;">
    <ul>
    <li>How to <strong>leverage e-mail and the Internet</strong> to sell FOR you and put your marketing on autopilot</li>
    In the part that says "style=", change the width to 470. You'll want to add some space to the right, so add "margin-right: 10px;" (without the quotes) to the part within quotes. That looks confusing. You should end up with this:
    Code:
    style="float:left; display:inline; width:470px; height:400px; margin-right: 10px;"
    Removing the menu will be just a tiny bit trickier...you'll need to edit the theme's stylesheet.

    I'll give you the style to add to the bottom of your stylesheet; if you want an explanation of why/how it works, let me know. Edit your stylesheet, add this to the bottom:
    Code:
    .page-id-717 #navigation { display: none; }
    You'll end up with no nav section, just a pretty page with a tan border around the content.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[3452949].message }}
    • Profile picture of the author Nightengale
      Thanks so much for your help guys!

      Steve,

      I was pretty certain it was easy to fix, but I'm not a designer or developer and I have NO idea what to look for or where to go to figure it out. Consequently, I've spent more time doing this than is reasonable. Arrgggh! So your help is greatly appreciated.

      I just got in and am exhausted right now. I will try it tomorrow and let you know how it goes.

      Michelle
      Signature
      "You can't market here. This is a marketing discussion forum!"
      {{ DiscussionBoard.errors[3454746].message }}
      • Profile picture of the author SteveJohnson
        Originally Posted by Nightengale View Post

        Consequently, I've spent more time doing this than is reasonable.
        I'd scare myself to death if I tried to add up the countless hours I've spent trying to make something work :-)

        Let me know if you need some more help, PM me if you want.
        Signature

        The 2nd Amendment, 1789 - The Original Homeland Security.

        Gun control means never having to say, "I missed you."

        {{ DiscussionBoard.errors[3456774].message }}
    • Profile picture of the author TheCopyGirl
      Originally Posted by SteveJohnson View Post

      I'll give you the style to add to the bottom of your stylesheet; if you want an explanation of why/how it works, let me know.
      Just in case it helps, here's how you can find your theme's stylesheet:



      Also, to clarify: editing the stylesheet just makes the navigation section invisible, meaning that the content is still there and the CSS directs the browser to not display the content. If you want to eliminate the navigation content altogether, then you probably want to edit the file called header.php and look for the code corresponding to the navigation there. But be warned, this will remove the navigation from all pages.

      I am guessing that in your situation, the CSS trick would be the quicker, and possibly better, solution.
      {{ DiscussionBoard.errors[3456928].message }}
      • Profile picture of the author Nightengale
        CopyGirl,

        Thanks for your help. Yes, editing the style sheet to hide the nav bar content for just the one page is what I want to do. I don't want to eliminate it!

        Thanks,
        Michelle
        Signature
        "You can't market here. This is a marketing discussion forum!"
        {{ DiscussionBoard.errors[3466126].message }}

Trending Topics