Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Sackfield
Courses Plus Student 19,663 PointsWordPress Custom Post Types not sticking to site layout!
Hello All,
Pleas first see the Static Version here. Now the issue I am having can be seen on this image here.
As you can see the layout is breaking, it has an amount of posts divisible by 3 meaning that there are no loose ones about. You can see the style sheet here and the WordPress markup is below
<?php
/*
Template Name: Work Page
*/
get_header(); ?>
<?php
$args = array(
'post_type' => 'work',
'post_per_page' => '50'
);
$the_query = new WP_Query( $args );
?>
<!-- Hero Section -->
<header id="portfolio">
<div class="container">
<h1 class="highText text-center">Portfolio</h1>
</div><!-- Container Close -->
</header>
<div class="np container">
<section class="portfolio text-center">
<div class="row">
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<article class="col-xs-12 col-sm-4">
<div class="wrap">
<hgroup>
<h3><?php the_title(); ?></h3>
<h4><?php the_field('subtitle'); ?> </h4>
</hgroup>
<a title="<?php the_field('description'); ?>" href="//player.vimeo.com/video/<?php the_field('vimeo_link'); ?>?title=0&byline=0&portrait=0&color=f4872e" class="fancybox fancybox.iframe"><img src="<?php the_field('image'); ?>"></a>
</div><!-- Wrap Close -->
</article>
<?php endwhile; else: ?>
<p>There are no posts or pages here</p>
<?php endif; ?>
</div><!-- Row Close -->
<div>
<a style="margin-right: 40px;" class="btn" href="about.php">About Us</a>
<a class="btn" href="contact.php#cform">Contact Us</a>
</div>
</section>
</div>
</div>
<?php get_footer(); ?>
The markup up is being input the same as the static version but still it breaks. Any adivce would be great. Also any more information is available that you may need.
Thanks
5 Answers
Jerry Lopez
8,128 PointsThe Problem
In your static file you have a row class for every three articles. In your loop here you only have the row class specified once outside of the loop causing all your articles to be in one row class.
Example:
<div class="row">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
The Solution
You'll need to specify with in the loop that for every three posts wrap the three posts with the row class.
Example:
<div class="row">
<article></article>
<article></article>
<article></article>
</div>
<div class="row">
<article></article>
<article></article>
<article></article>
</div>
Jerry Lopez
8,128 PointsTry this:
You'll see that I added a counter variable that increments at the end of each loop. I added the class row before the loop and the final closing of the row class after the loop. When the counter reaches any number divisible by three it will add a closing div and a new opening div with the class row. Try it out an let me know if it worked.
<section class="portfolio text-center">
<div class="row">
<?php $counter = 0; ?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<article class="col-xs-12 col-sm-4">
<div class="wrap">
<hgroup>
<h3><?php the_title(); ?></h3>
<h4><?php the_field('subtitle'); ?> </h4>
</hgroup>
<a title="<?php the_field('description'); ?>" href="//player.vimeo.com/video/<?php the_field('vimeo_link'); ?>?title=0&byline=0&portrait=0&color=f4872e" class="fancybox fancybox.iframe"><img src="<?php the_field('image'); ?>"></a>
</div><!-- Wrap Close -->
</article>
<?php if($counter % 3 == 0){ echo '</div><div class="row">'} ?>
<?php $counter++; ?>
<?php endwhile; else: ?>
<p>There are no posts or pages here</p>
<?php endif; ?>
</div><!-- close final row -->
<div>
<a style="margin-right: 40px;" class="btn" href="about.php">About Us</a>
<a class="btn" href="contact.php#cform">Contact Us</a>
</div>
</section>
Adam Sackfield
Courses Plus Student 19,663 PointsI did this, think its similar, seems to work anyway.
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php if ( $count % 3 == 0 ) echo "\n" . '<div class="row">'; ?>
<article class="col-xs-12 col-sm-4">
<div class="wrap">
<hgroup>
<h3><?php the_title(); ?></h3>
<h4><?php the_field('subtitle'); ?></h4>
</hgroup>
<a title="<?php the_field('description'); ?>" href="//player.vimeo.com/video/<?php the_field('vimeo_link'); ?>?title=0&byline=0&portrait=0&color=f4872e" class="fancybox fancybox.iframe"><img src="<?php the_field('image'); ?>"></a>
</div><!-- Wrap Close -->
</article>
<?php if ( $count % 3 == 2 ) echo "\n" . '</div><!-- Row Close -->';
$count++; ?>
<?php endwhile; else: ?>
<p>There are no posts or pages here</p>
<?php if( $count%3 != 0 ) echo "\n" . '</div><!-- Row Close -->' ?>
<?php endif; ?>
Counte is declared at the top. Thanks for your speedy answer
Jerry Lopez
8,128 PointsNo problem! Glad I could help :D
Adam Sackfield
Courses Plus Student 19,663 PointsActually Jerry Lopez if your still online, you don't happen to know why the contact page is failing I have it set up as a custom template and this is the code
<?php
/*
Template Name: Contact Page
*/
get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = trim($_POST["name"]);
$email = trim($_POST["email"]);
$phone = trim($_POST["phone"]);
$message = trim($_POST["message"]);
$package = $_POST["package"];
if ($name == "" OR $email == "" OR $message == "") {
echo "You must enter your Name, Email and a message.";
exit;
}
foreach ( $_POST as $value ) {
if( stripos($value, 'Content-Type') !== FALSE ) {
echo "There was a problem with the information you entered";
exit;
}
}
if ($_POST["website"] != "") {
echo "Your form submission has an error.";
exit;
}
require_once("includes/class.phpmailer.php");
$mail = new PHPMailer();
if (!$mail->ValidateAddress($email)) {
echo "You must specity a valid email adrress.";
}
$email_body = "";
$email_body = $email_body . "Name: " . $name . "<br>";
$email_body = $email_body . "Email: " . $email . "<br>";
$email_body = $email_body . "Phone: " . $phone . "<br>";
$email_body = $email_body . "Package: " . $package . "<br>";
$email_body = $email_body . "Message: " . $message;
$mail->SetFrom($email, $name);
$address = "edgeofcinema@gmail.com";
$mail->AddAddress($address, "Edge of Cinema");
$mail->Subject = "Edge of Cinema" . $name;
$mail->MsgHTML($email_body);
if(!$mail->Send()) {
echo "There was a problem sending the email: " . $mail->ErrorInfo;
}
header("Location: contact.php?status=thank-you");
exit;
}
?>
<?php if (isset($_GET["status"]) AND $_GET["status"] == "thank-you" ) { ?>
<div class="container">
<section style="padding: 0 60px;" class="col-lg-8 col-lg-offset-2 text-center">
<h2 style="color: #b6b5b5; margin-top: 170px;">Thank You</h2>
<h3 style="color: #b6b5b5; margin-bottom: 170px;">Your message has been received and is important to us and we aim to respond
within 72hrs. Should you need to speak to us please call 1-855-831-1726</h3>
</section>
</div>
<?php } else { ?>
<header id="contact">
<div class="container highText text-center">
<h1>Contact Us</h1>
<section id="hours">
<div class="row">
<div class="col-xs-6 col-lg-offset-2">
<p style="margin: 6px 0;">PHONE - 1-855-831-1726</p>
<p style="margin: 6px 0;">EMAIL - EDGEOFCINEMA@GMAIL.COM</p>
</div><!-- col-lg-8 close -->
<div class="col-xs-6 col-lg-2">
<p style="text-align: center">HOURS</p>
<p style="text-align: center">MON - FRI</p>
<p style="text-align: center">9AM - 5PM</p>
</div><!-- col-lg-8 close -->
</section>
</div><!-- Container Close -->
</header>
<section id="cform">
<div class="container">
<form method="post" action="contact.php">
<h2>Video Production Notes</h2>
<div class="fgroup">
<label>Name: </label>
<input name="name" type="text" required>
<label>Phone: </label>
<input name="phone" type="phone">
<label>Email: </label>
<input name="email" type="email" required>
<label style="display: none;">Website: </label>
<input style="display: none;" name="website" type="text">
</div><!-- fgroup Close -->
<div class="fgroup">
<label>Describe your video project: </label>
<textarea name="message" type="textarea" required placeholder="Here's what I need…"></textarea>
<label for="package">Select a Package:
<select name="package" id="package">
<option <?php if ($_GET['option']=='fd') echo 'selected'; ?> value="Full-Day">Full Day</option>
<option <?php if ($_GET['option']=='hd') echo 'selected'; ?> value="Half-Day">Half Day</option>
<option <?php if ($_GET['option']=='custom') echo 'selected'; ?> value="Custom">Custom</option>
</select>
</label>
<button class="btn" style="color: white" type="submit">Send Message</button>
</div><!-- fgroup Close -->
</form>
</div><!-- Container Close -->
</section>
<?php } ?>
<?php endwhile; else: ?>
<p>There are no posts or pages here</p>
<?php endif; ?>
<?php get_footer(); ?>
It works on static but not WP. Do i have to use a plugin or code it different?
Jerry Lopez
8,128 PointsI think the issue maybe in the form tag. As the action you have contact.php but since there is no contact.php file in the wordpress's root directory I'm assuming you are trying to get this php file.
try this:
<form method="post" action="<?php echo get_template_directory_uri(); ?>/contact.php">
here's the wordpress codex article about that function: http://codex.wordpress.org/Function_Reference/get_template_directory_uri
Adam Sackfield
Courses Plus Student 19,663 PointsThanks again, I think from looking around it's just going to be easier to use a plugin then re-style that.
Jerry Lopez
8,128 Pointsyea that would be good. Try Gravity Forms it's a very nice plugin: http://www.gravityforms.com/
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsDarn it, I knew at one point i had a row round each 3 but on looking I must have spaced out and not noticed them. Ok so is it just a conditional statement within the loop i need to do?