treehouse : what would you like to learn today?
Web Design Web Development iOS Development

page loop issue

  •       <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    
            <h2> <?php the_title(); ?> </h2>
    
            <?php the_content(); ?>
          <?php endwhile; ?>
    

    That is the current loop in my index php file that gets all of my pages made. The site is one long website and I used custom links in the menu section to link to an anchor inside the page content.

    Few issues I need help with would be - 1. The pages, while ordered, seemingly don't care. They are in the exact opposite of what I want the order to be and can't seem to find how to change that. 2 - I'd like each page to have its own wrap so I can put margin on each to divide the sections.

    If anyone can give me some insight, would be very helpful. Thanks.

  • @Jeager I'm sort of confused still. You want each page to have a different wrap? Surely there could be a better way than to do that.

    What do you mean you ordered the pages and they are listing in the opposite way? Are you talking about the main nav? If so, the loop above has no involvement with that. You can set how you want the pages to appear by going to 'Pages', select a page and then edit the 'Page Attribute' order: http://cloud.chrisburton.me/KYCq

  • No, I am currently using my nav bar to link to anchors inside the content of each page. I had to create each anchor inside the page content and a custom nav link inside the menu option to link to said anchor.

    That said, the loop I posted above populates the main page with each page I have created. However when the pages are listed, they do not have their own unique or global class/ID, rather they are all under the div.content rather then all under div.content with a class of .page or .(whatever)

    I need each page posted to have a class of .whatever so I can style it. Then I need some way of ordering the pages that are shown. http://www.jtpenezich.com/abc/

    That is an older version, as I am currently working locally, but it should give the idea of how the pages are being listed verse what the navigation shows.

  • Trying to make this easier to understand, as I know I am probably not perfectly describing it.

    In the link it has the first 3 posts displayed through a custom query followed by the twitter, and then starts to display the pages (which I made through the dashboard - pages). I can find/work with normal post loops easier then the page loop, hence where the trouble is kicking in.

    After twitter, the pages are displayed but without a wrapper around each individual page. I would like to add that, similiar to my post loop.

      <?php $custom_query = new WP_Query('posts_per_page=3');
          while($custom_query->have_posts()) : $custom_query->the_post(); ?>
    
              <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    
              <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?> </a> </h2>
    
              <p> <?php the_content('Continue Reading..'); ?> </p>
    
              </div>
    
          <?php endwhile; ?>
      <?php wp_reset_postdata(); // reset the query ?>
    

    Mainly so I can create a division in between each of the pages without adding the margin to the headings.

    The other issue is that they are displaying in the incorrect order. If there is some way to display them ASC or DESC (forget what is default) then it would display in the correct order.

    Hope that clears things up a tad more.

    Edit: Changed the page loop to display headings as h3's and adding a margin to that. It creates the division I want to do, but would rather each page have a wrap instead if possible.

  • @Jeager Hmm. The only thing I can suggest is using the following:

    <div <?php body_class('whatever'); ?>>

    This will spit out the normal classes but also attach the class 'whatever' to it.

    Edit: You can set the page order by using the following:

    'order' => 'ASC'

    or

    'order' = 'DESC';

  • Hmm... It still gives the entire listing of pages the same class. Do I have to reset the page loop somehow?

  • @Jeager Please post the output of the classes/ID's (including the div).

  • How would one do that? When I click code, nothing shows up, so i tried <code and it just displays content

  • @Jeager No, no. Just give me what this outputs:

      <div <?php body_class('whatever'); ?>>
    
  • Edit: Did something wrong. Fixed to:

    <

    div class="home page page-id-67 page-template-default logged-in page-content">

    However it still displays the entire section of pages under the class. Whatever is now .page-content

  • Don't use body_class for this, just get the post's slug:

    http://www.joshstauffer.com/get-post-slug-in-wordpress/

    As for the ordering, you should be able to fiddle with query_posts to your liking.

  • Would that be done in a custom query post? Because I need it to get the slug of the page, not the post, and havnt found a way to display the page information through a query.

  • @Jeager You paste your code, highlight it and then click the code button.

    This is still quite confusing so I'm going to ask one last question. Is this a one page site?

  • Yes. One page site. I mentioned it in the first post but should of made it more clear, sorry. That is why I'd like each page to be similar to the post loop and able to give each its own container. Also why I need to be able to sort them like how I want.

  • Are you querying posts or pages?

  • I have a query set up for the posts. All the pages are being displayed right now on the main site (as I want, it was intended to be one long page). The pages however are not querying. I could not find how to grab the page info rather then post info.

    http://www.jtpenezich.com/abc/

    That is the page (in a nutshell, still needs actual design work) the nav at the top reflects the pages I created. Which are all below the twitter feed. Each heading you see after the twitter feed is its own page.

  • Should be as simple as doing this for the query:

      query_posts( 'post_type=page&orderby=title&order=DESC' );
    

    ...or whatever options you want.

    And you don't need to use the slug at all for an identifier, you can just use the ID like you did above:

      <div class="page-<?php the_ID(); ?>">
    
  • I think the main thing is that you were still querying posts, not pages.

  • Well the pages are being displayed. The post query was fine and needed nothing changed. The pages used a default loop that was not a query. I took it from a one-col template and added it into the index page and then made the index a static page.

  • @TheDoc Ah ha! I was looking for this <?php the_ID(); ?>

  • See below

  •       <?php $custom_query = new WP_Query('post_type=page&order=ASC');
                while($custom_query->have_posts()) : $custom_query->the_post(); ?>
                   <div class="page page-<?php the_ID(); ?>">
    
                        <h2> <?php the_title(); ?> </h2>
    
                        <p> <?php the_content(); ?> </p>
    
                  </div>
          <?php endwhile; ?>
              <?php wp_reset_postdata(); // reset the query ?>
    

    This code seems to be working correctly. The post_type=page was the real winner here. Thanks a ton! It seems to be adding an extra paragraph tag for some reason, but I'll try to see why. Also the way I set up the navigation was to insert an anchor into the content and link it through a custom menu button. Wonder if I can somehow set it up for the nav to link to the same page dynamically rather then going to its own.

    But this is what I was looking for, so thanks a ton!

    Edit: http://www.jtpenezich.com/abc/ That is what I was aiming for. Figured you may want to see. Also trimmed it down a bit to avoid so many unused classes. Thanks again

  • Make sure your div that uses the_ID() is inside of your loop.

    Glad you got it sorted!

  • @Jeager Is it adding a <p> tag inside the content? You can remove that by adding the code below to your functions.php file.

      // REMOVES <p> TAG FROM POST CONTENT
      remove_filter( 'the_content', 'wpautop' );
    
  • Yes it was, and that function worked great. And yeah I had the ID outside but noticed it giving a ton of extra classes and an extra page wrap. Fixed now to where every page is inside the proper wrap and given its own class.

    All that is left for functionality is to see if I can somehow change the nav to go directly to the page. If not, I'll just stick with the custom menu so everything goes to the anchor I tell it to.

  • @Jeager If it's a one-page site why would it need to switch pages?

  • It does not. How it is set-up right now it jumps to an anchor lower on the page, which I added into the content of each page and given a name. I'm trying to see if I can find a more dynamic way of doing that. Also since my nav is fixed up top, I need it to jump to the anchor but -50px or so. I achieved this in mockups without wordpress by giving the anchor position:absolute and then forcing it to the top of the parent page element. But trying to... wordpressify it.

  • So like this...

     <a name="<?php the_title(); ?>"> <?php the_title(); ?> </a> 
    

    returns me the name of the title. Now I don't have to manually ad an anchor inside each of the pages content. However I still have to manually add a menu item and then link it to said anchor. But this automates the process a bit. Thanks to you guys for giving me the idea. You can give class and ID's, so I figured why not names also? But still need to push it up a bit so You can see the full page and title when you use the nav.

  • So, taking that a step forward. I have that anchor set above the heading. It will automatically create an anchor with the name of the title and .ap, while staying inside the .page of each "page" (which I am just treating as content for the site).

    <a name="<?php the_title(); ?>" class="ap"> </a>
    

    Afterwards I can then tell my nav to link to #whatever the name is of the anchor (which is the title of each section)

    And since each page has a padding-top of 100px to divide the content, the .ap class is position:absolute; top:0. Which makes it so it won't hide the content you click to navigate to. This little experiment made me have a sudden realization of what some basic php can do.

  • @Jeager Or you can just use jQuery to jump to the specific anchor points unless I'm misunderstanding (again).

  • Im sure you can. My last comment though is working. I was just following through giving an answer to my own question in case someone stumbles on it looking for an answer