Dropdown Menu Weirdness

I had this site all together and then changed the menu to a simple <ul> multi-level CSS menu and am in trouble all over again…:frowning:

I can swear it was working fine on all pages, but maybe I was wrong. It’s just fine on the home page but disappears on other pages and I just can’t figure out why. I blame some WordPress plug-in, but they are the same on all pages so that doesn’t make sense. The code fails the validator miserably due to 3rd party plug-ins and links, so that doesn’t make it easier, but again, the menu works on the home page.

Please have a look at http://sandyschussel.com/ - home and any other page.

HEEEEEEEEEEELP! :injured:

By the way, the WP Codex has some helpful information on it, even if it is somewhat out of date. Also, the forums there are chock full of stuff that is useful

Codex: http://codex.wordpress.org/Function_Reference
Forums: http://wordpress.org/support/

Here is where your “From the Blog” section is:


        <!-- lastest from the blog -->
        <h1 class="home">FROM THE BLOG
            <span class="links">
            <img src="<?php bloginfo('template_url'); ?>/images/ico_rss.png" alt="RSS" /><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a> &nbsp; | &nbsp;
            <a href="<?php echo get_category_link(get_option('wise_blog_id') )?>">Visit our blog &raquo;</a>
            </span>
        </h1>
        <ul class="latestPosts">
        <?php
            if(get_option('wise_latest_posts')!=''){
            $posts_query = new WP_Query($query_string.'&cat='.get_option('wise_blog_id').'&orderby=date&showposts='.get_option('wise_latest_posts'));
            }else{
            $posts_query = new WP_Query($query_string.'&cat='.get_option('wise_blog_id').'&orderby=date&showposts=4');
            }
            if ($posts_query -> have_posts()) : while ($posts_query -> have_posts()) : $posts_query -> the_post(); 
        ?>
            <li>
                <img src="<?php if ( function_exists('p75GetThumbnail') )echo p75GetThumbnail($post->ID); ?>" alt="<?php the_title(); ?>" /><a href="<?php the_permalink(); ?>"><strong><?php the_title(); ?></strong></a>

                 <br /> 

                 <?php content('25'); ?> 

                <br /><span>Posted on <?php the_time('F j, Y') ?></span>
            </li>
        <?php endwhile;
              endif; 
        ?>
        </ul>
        </div>
        <!-- end colLeft -->

See the <?php content(‘25’); ?> towards the bottom? That is what is grabbing the content of your blog posts. It’s also grabbing all of the html code. I’m not sure if this works on content(); or not, but try this:


<?php 
	$content = strip_tags(content('25'));
	echo $content; 
?> 

This makes the content() into a string and then strips all html out of it and gets only the first 25 words.

If that doesn’t work, try this instead:


<?php the_excerpt(); ?>

and add this to the functions.php file:


// Improved excerpt function
function improved_trim_excerpt($text) {
	global $post;
	if ( '' == $text ) {
		$text = get_the_content('');
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = strip_tags($text, '<p>');
		$excerpt_length = 25;
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words)> $excerpt_length) {
			array_pop($words);
			array_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
	return $text; 
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');

What this does is fixes the_excerpt() up to get rid of all markup, adds <p> tags instead of <br /> tags, shortens it to 25 words and adds “[…]” to the end of the post. This is what I use on a blog of mine.

Hope that works for you.

Hey smarsh! Could you post the code for that section of your site… We may be able to figure it out, just need to see what the php is doing there I guess.

Thanks Josh - it’s still a problem in IE7 and webkit browsers though…

Yeah - no response from the WP forum - I think CSS is one of the best forums here. :wink:

I searched everywhere and never found a blockquote and looked into the_loop(); and the_excerpt(); but couldn’t figure out anything. Here’s the section of code from the home page, but I’m not sure it will be helpful:

<?php get_header(); ?>
<!-- home header -->
    <div id="homeHeader">
<?php /*?><?php include (TEMPLATEPATH . '/home_header.php'); ?>removed<?php */?>
    </div>
<!-- end home header -->
        <!-- features -->
        <?php $feature1=get_post(get_option('wise_feature1'));
              $feature2=get_post(get_option('wise_feature2'));
              $feature3=get_post(get_option('wise_feature3')); 
              if(get_option('wise_feature1')!= null && get_option('wise_feature2')!= null && get_option('wise_feature3')!= null){?>
        <div id="features" class="clearfix">
            <div class="featuresInner first">
                <h2><?php echo $feature1->post_title?></h2>
                <?php echo apply_filters('the_content', $feature1->post_content);?>
            </div>
            <div class="featuresInner">
                <h2><?php echo $feature2->post_title?></h2>
                <?php echo apply_filters('the_content', $feature2->post_content);?>
            </div>
            <div class="featuresInner">
                <h2><?php echo $feature3->post_title?></h2>
                <?php echo apply_filters('the_content', $feature3->post_content);?>
            </div>
        </div>
        <div id="featuresBottom"></div>
        <?php }?>
        <!-- end features -->

        <!-- begin colLeft -->
        <div id="colLeft">

        <!-- home custom content -->
        <?php if(get_option('wise_home_content')) { 
            $homecontent=get_post(get_option('wise_home_content'));?>
            <h1 class="home"><?php echo $homecontent -> post_title?></h1>
            <?php echo apply_filters('the_content', $homecontent->post_content);?>
        <?php }?>

        <!-- lastest from the blog -->
        <h1 class="home">FROM THE BLOG
            <span class="links">
            <img src="<?php bloginfo('template_url'); ?>/images/ico_rss.png" alt="RSS" /><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a> &nbsp; | &nbsp;
            <a href="<?php echo get_category_link(get_option('wise_blog_id') )?>">Visit our blog &raquo;</a>
            </span>
        </h1>
        <ul class="latestPosts">
        <?php
            if(get_option('wise_latest_posts')!=''){
            $posts_query = new WP_Query($query_string.'&cat='.get_option('wise_blog_id').'&orderby=date&showposts='.get_option('wise_latest_posts'));
            }else{
            $posts_query = new WP_Query($query_string.'&cat='.get_option('wise_blog_id').'&orderby=date&showposts=4');
            }
            if ($posts_query -> have_posts()) : while ($posts_query -> have_posts()) : $posts_query -> the_post(); 
        ?>
            <li>
                <img src="<?php if ( function_exists('p75GetThumbnail') )echo p75GetThumbnail($post->ID); ?>" alt="<?php the_title(); ?>" /><a href="<?php the_permalink(); ?>"><strong><?php the_title(); ?></strong></a><br /> <?php content('25'); ?> 
                <br /><span>Posted on <?php the_time('F j, Y') ?></span>
            </li>
        <?php endwhile;
              endif; 
        ?>
        </ul>
        </div>
        <!-- end colLeft -->

I’m stuck (as usual) on this and really appreciate the help!

If you want to fix the indent you’ll have to fix up your margins. Now, if you want to get rid of the final line, you’ll have to get rid of all of them. Here is some new code to update your style.css with that fixes both of your issues.


 .latestPosts {         /* style.css (line 380)  */
   margin-left:0;
 }

 .latestPosts li {     /* style.css (line 384)  */
   background:#EFEFEF;
   display:block;
   float:left;
   margin:5px 0;
   padding:15px;
   width:565px;
}

Wonderful! Glad you got it working.

Thanks again Josh!

It was the second approach of redefining the_excerpt that did the trick. After that, all I had to do is adjust the count for # of words displayed. :cool:

Thanks guys! I just did not see that. I changed the CSS path to the dynamic PHP path so all pages find it the same.

One last thing I just don’t see:
On the home page there’s a section “from the blog”. With the exception of FF and Opera, it indents each listing after the first. In FF and Opera, they all are aligned equally to the left. How can I get rid of the indent and the extra <hr> at the bottom of the list?

Here’s the CS:

.latestPosts {
    margin-left:-25px;
}

.latestPosts li {
    display:block;
    border-bottom:1px solid #ddd;
    padding:15px 0;
    width:580px;
    float:left;
    margin-left:25px;
}    

.latestPosts li img {
    float:left;
    padding:5px;
    background:url(images/bk_thumbs.jpg) 0 0 no-repeat;
    margin:0 10px 0 0;
}

.latestPosts li span {
    font-size:11px;
    color:#999;
}

The dropdown.css is only working on the home page, all other pages are not picking it up.

It looks like you have the file path the same on all other pages but neither Firebug or WebDev show the dropdown.css on any page besides the home page.

EDIT: ok hornet beat me to it :slight_smile:

Looks like it’s trying to call the style sheets for the dropdown menus, but can’t access them properly because you have them set as:


<link href="wp-content/themes/wisebusiness/css/dropdown/themes/default/default.css" />

I’m not sure if you hardcoded that or not, but if you did, that’s why it only works for the home page.

The home page url is sandyschussel.com and the styles are getting referenced properly. How the browsers see it:


<link href="http://sandyschussel.com/wp-content/themes/wisebusiness/css/dropdown/themes/default/default.css" />

Once you throw in a new page the href gets thrown out of wack:


<link href="http://sandyschussel.com/products/sandys-books/wp-content/themes/wisebusiness/css/dropdown/themes/default/default.css" />

and it says, “there is no such thing as that directory! FAIL!”

This is how you need to reference your stylesheets for WordPress:


<link href="<?php bloginfo('template_directory'); ?>/css/dropdown/themes/default/default.css" />

Hope that helps you.

Your first list item has an miss-closed blockquote & em tag and is screwing up the format.


<blockquote>
 <em>Dear Sandy,</em>
 <em>How do I get past my run of bad luck and get my practice back on track?</em>
 <em>It seems that every time I get close
  <br />
  <span>Posted on August 16, 2010</span>
</li>

So, the DOM is seeing every subsequent list item as a nested list item and still part of the first one.

Fix that and you’ll fix your problem.

If these list items are coming in from a the_loop(); then you need a new function that’ll strip out all the html tags from your the_excerpt();. I’m not too savvy on that but if you ask in the wordpress forum how to strip html tags from the_excerpt(); you should get a good answer quickly. Or check out the [URL=“http://codex.wordpress.org”]wordpress codex.

Thanks. I saw that blockquote and couldn’t figure out where it was coming from. What you say makes a lot of sense. I really love WP - not!