0

I'm having an issue inserting a wrapper div into my php index file that we're using for the front page of the site.

Right now it looks like this: Ugly!

And it needs to look like this: Much better!

I'm aware this is a CSS issue, and the fix I can think of is to insert a wrapper div around those 6 divs on the home page, But I don't know where to put the code, which is here:

<?php get_header(); ?>
<?php global $woo_options; ?>
<?php if ( $woo_options['woo_featured_disable'] <> "true" ) include( TEMPLATEPATH . '/includes/featured.php'); ?>
<?php

$args = array(
'post_type' => 'infobox',
'order' => 'DESC', // DESC for newer first.
'orderby' => 'date',
'posts_per_page' => 6 // For a 3x2 grid.
);

$latest = new WP_Query( $args ); // You now have an object you can use in 'The Loop'.
if ( $latest->have_posts() ) {
while ($latest->have_posts()) : $latest->the_post(); ?>

                <div class="bskhp_t">
        <a href="<?php echo get_post_meta($post->ID, 'mini_readmore', true); ?>">
            <img src="<?php echo get_post_meta($post->ID, 'mini', true); ?>" alt="" class="home-icon">
        </a>
        <div class="bskhp_f">
            <a href="<?php echo get_post_meta($post->ID, 'mini_readmore', true); ?>">
                <h3><?php the_title(); ?></h3>
            </a>
            <p class="mini-p"><?php echo get_post_meta($post->ID, 'mini_excerpt', true); ?></p>
            <a href="<?php echo get_post_meta($post->ID, 'mini_readmore', true); ?>">
                <span>Read more</span>
            </a>
        </div>
        </div>

<?php endwhile;
}
$v = array();

$upload_dir = wp_upload_dir();

$v[] = "<div class=\"bskhp_vpv\"><a href='https://www.youtube.com/watch?v=x6HQ4MFqMg0' target='_blank' style='color:#445567;font-family:arial;font-size:12px;font-weight:500'><img style='padding:4px;border:1px solid #000000; width:180px; height:90px' src='".$upload_dir["baseurl"]."/2015/04/video-capture-1.png' width='180' height='90' vwidth='180' vheight='90' /><div style='color:#000000;font-family:arial;font-size:12px; padding:4px 0'>Mental Health, Homelessness, and Stability in Housing.</div><p style='width:200px'></p></a></div>";
$v[] = "<div class=\"bskhp_vpv\"><a href='https://www.youtube.com/watch?v=gnMt4_7Xc9M' target='_blank' style='color:#445567;font-family:arial;font-size:12px;font-weight:500'><img style='padding:4px;border:1px solid #000000; width:180px; height:90px' src='".$upload_dir["baseurl"]."/2015/04/video-capture-2.png' width='180' height='90' vwidth='180' vheight='90' /><div style='color:#000000;font-family:arial;font-size:12px; padding:4px 0'>2014 Key to Hope luncheon keynote address by Charles Gibson</div><p style='width:200px'></p></a></div>";
$v[] = "<div class=\"bskhp_vpv\"><a href='https://www.youtube.com/watch?v=GKCJTTJq4KM' target='_blank' style='color:#445567;font-family:arial;font-size:12px;font-weight:500'><img style='padding:4px;border:1px solid #000000; width:180px; height:90px' src='".$upload_dir["baseurl"]."/2015/04/video-capture-3.png' width='180' height='90' vwidth='180' vheight='90' /><div style='color:#000000;font-family:arial;font-size:12px; padding:4px 0'>Plymouth Housing Group 2013 Documentary</div><p style='width:200px'></p></a></div>";
$p = array();

$p[] = "<div><a href='https://www.plymouthhousing.org/about-us/publications/'><img src='".$upload_dir["baseurl"]."/2015/04/publications-1.png' height='254' width='190' /><div class=\"bskhp_pcap\">ANNUAL REPORTS</div></div>";
$p[] = "<div><a href='https://www.plymouthhousing.org/about-us/publications/'><img src='".$upload_dir["baseurl"]."/2015/04/publications-2.png' height='254' width='190' /><div class=\"bskhp_pcap\">FACT SHEET &amp; MAPS</div></div>";
$p[] = "<div><a href='https://www.plymouthhousing.org/about-us/publications/'><img src='".$upload_dir["baseurl"]."/2015/04/publications-3.png' height='254' width='190' /><div class=\"bskhp_pcap\">NEWSLETTER</div></div>";

$mv = array();

$mv[] = "<h3 class='bskhp_h3'>Our Vision</h3>Housing is just the beginning...the first step to building hope and transforming lives.  We envision a day when every person has a home and a better quality of life.<p class=\"bskhp_rm\"><a href='https://www.plymouthhousing.org/about-us/mission-history/'>READ MORE</a></p>";
$mv[] = "<h3 class='bskhp_h3'>Our Mission</h3>Plymouth Housing Group works to eliminate homelessness and address its causes by preserving, developing and operating safe, quality, supportive housing and by providing homeless adults with opportunities to stabilize and improve their lives.<p class=\"bskhp_rm\"><a href='https://www.plymouthhousing.org/about-us/mission-history/'>READ MORE</a></p>";

?>

Someone else graciously helped me with this code earlier, but it's been a long day and my head is pounding :) Does anyone know an easy fix?

  • You should use attachment posts with the wp_get_attachment_url function, don't hard code file paths in the uploads folder. Look at example image controls in the customizer for a good example – Tom J Nowell Apr 13 '15 at 23:49
0

If I understand you correctly, you want to modify your code so it looks like this at the top:

<div class="new_wrapper">
<?php

$args = array(

and this at the bottom:

<?php endwhile;
} ?>
</div>
<?php
$v = array();

It sounds like you may have been adding the <div></div> inside the <?php ?> code, which would have caused an error (and if error displaying is turned off, it would have likely resulted in a blank page).

Basically, what you're doing here is inserting a wrapper around the main Wordpress loop - including the if (have_posts()) and while (have_posts()) blocks. Keeping the wrapper outside of these two blocks means that 1) the wrapper will still be printed out when there are no posts (because it's outside of the if block), and 2) the wrapper will only be printed once, i.e. not repeated for every post as it would if it was inside the while loop.

Hoping that solves the problem and helps you understand the logic behind it - if not apologies if I misunderstood the question!

| improve this answer | |
  • 1
    This displays the wrapper div even if there are no posts – Tom J Nowell Apr 13 '15 at 23:47
  • There will always be posts on this page :) Thank you so much for the answer, this worked! – Jensen010 Apr 14 '15 at 3:52
0

You should open div right before argsand <?php and close it right after endwhile, if I got question right.

| improve this answer | |
  • Thank you for responding! Seems almost right, but putting the end tag there breaks the page, as in it doesn't load anymore. happens when I put it anywhere around there actually. I may not have posted enough of the code, I'll edit my question to include the next few lines. – Jensen010 Apr 13 '15 at 22:53
  • my mistake, there was a missing <?php tag that was throwing everything off – Jensen010 Apr 14 '15 at 4:01
0

Right now you have:

if ( $latest->have_posts() ) {
while ($latest->have_posts()) : $latest->the_post(); ?>
 ... inside the loop
<?php endwhile;
}

Which in pseudocode is:

if we have posts
    foreach post
        show the post
    endforeach
endif

So you need to do this instead:

if we have posts
    open wrapper div
    foreach post
        show the post
    endforeach
    close wrapper div
endif
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.