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?

Improve this question
1
  • 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 Commented Apr 13, 2015 at 23:49

3 Answers 3

Reset to default
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
2
  • 1
    This displays the wrapper div even if there are no posts Commented Apr 13, 2015 at 23:47
  • There will always be posts on this page :) Thank you so much for the answer, this worked! Commented Apr 14, 2015 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
2
  • 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. Commented Apr 13, 2015 at 22:53
  • my mistake, there was a missing <?php tag that was throwing everything off Commented Apr 14, 2015 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 and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.