0

I am new to wordpress custom themes and am trying to recreate this website (http://www.divecarib.com/) as practice. I am trying to find the correct way to achieve the following:

I have created a custom post type called feature. I am using the get_template_part function to call the title and the content of this post type in my front-page.php. ("Feature" is basically one of the 3 service highlights on the front page of the website mentioned above)

I want these features arranged into 3 list items that are horizontally aligned just like the above website. Each list item contains a div that holds the h2 and p tag for the heading and content respectively. The UL sits inside an article.

Currently I have been able to achieve the layout I wanted, but when inspecting the code with chrome tools, I see several things that are off. First of all, instead of getting 3 LIs inside one UL, I have the parent article being repeated 3 times resulting in 3 ULs with only 1 LI in each. It LOOKS the same on the web, but it presents issues. The parent elements no longer wrap the children as they did before (prior to implementing this structure in the php files, I placed the html in the wordpress admin area and used get_content(); and it all worked.) I am using the exact same stylesheet with no changes so I expected things to look the same, but I cannot apply the background color to the article now because it doesn't wrap the children.

In addition there are empty p tags before and after the actual p tag that holds the post type content.

Thank you for the help current code is below.

front-page.php

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <h1><?php  the_title();?></h1>

        <?php
        $args = array(
            'post_type' => 'feature',
            'posts_per_page' => 3
            );

        $loop = new WP_Query($args);

        if ( $loop -> have_posts() ) :

            /* Start the Loop */
            while ( $loop -> have_posts() ) : $loop -> the_post();

                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                //get_template_part( 'template-parts/content', get_post_format() );
                ?>
                <?php  get_template_part( 'template-parts/content', 'feature' );

                 ?>

                <?php  

            endwhile;

            //the_posts_navigation();

        else :

            //get_template_part( 'template-parts/content', 'none' );

        endif; ?>

        wp_reset_postdata();

    </main><!-- #main -->
</div><!-- #primary -->

content-feature.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<ul>
    <li>
        <div>
            <h2><?php the_title(); ?></h2>
            <p><?php the_content(); ?></p>
        </div>
    </li>
</ul>

style.css

    #page{
    background-image: url('../../../wp-includes/images/mainImage.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
}
#content{
    margin:0 auto;
    max-width:980px;
}
#primary{
    max-width: 742px;
    margin: auto 72px auto auto;
}

main h1{
    text-align: center;
    color: white;
    font-weight: bold;
}

main ul li{
    list-style: none;
    max-width: 215px;
    display: inline-block;
    text-align: left;
    margin: 0 10px;
    line-height: 100%;
    color: #26729B;
    float:left;

}

main ul li p{
    font-family:Arial;
    font-size: 14px;
}

main ul li h2{
    line-height: 120%;
    font-weight: bold;
    font-size: 1.6em;

}
main ul{
    text-align: center;
    padding: 0px;
    margin: 0 auto;
}

main > div > p{
    text-align: center;
    padding:0px 0px 15px 0px;
    margin:0px;
    color: #434A52;
    font-size: 36px;
}

main > article {
    background-color: rgba(255, 255, 255, 0.66);
    padding:0px;
}

Image showing extra p tags:enter image description here

3
  • Looks like you're missing the closing </article> tag at the bottom of your content-feature.php file.
    – Caspar
    Apr 22, 2016 at 0:45
  • Sorry that's just a typo, it is present in the code. Post edited accordingly.
    – CZorio
    Apr 22, 2016 at 0:46
  • Actually I can't seem to add the closing tag...it shows up correctly in the preview, but when I click save edits it's gone again. Oh well.
    – CZorio
    Apr 22, 2016 at 0:48

1 Answer 1

1

Whatever you have in content-feature.php is going to be repeated for each article/post/feature. If you want all of them to be within the same <ul> you'll need to put everything else outside into the front-page.php main template. So:

front-page.php

if ( $loop -> have_posts() ) : ?>
     <ul>

       <?php /* Start the Loop */
        while ( $loop -> have_posts() ) : $loop -> the_post();
            get_template_part( 'template-parts/content', 'feature' ); ?>


  <?php endwhile;
     </ul>
        //the_posts_navigation();

content-feature.php

<li>
    <div>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    </div>
</li>

The only thing with this is if you want to preserve the <article> tag, you may need to swap it out for the <div> inside your loop. It's just a matter of structuring your html so that the repeating parts are inside the loop and the non-repeating parts are outside.

2
  • Thank you this makes sense. I still have a few questions: Why do I have to manually assign a height to the UL now in order for me to apply a background color? What I'm getting at is why does it not expand to include the contents of it's children, the list items? And also, do you know what's up with the extra p tags? I've added an image to the original question to demonstrate the issue.
    – CZorio
    Apr 22, 2016 at 1:30
  • the_content() formats the post contents with <p> tags, so you actually don't need them in your php. I've edited my answer accordingly.... should have seen that the first time around. :( As for the css question, that's something you'll get a better answer for on stackoverflow.com
    – Caspar
    Apr 22, 2016 at 1:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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