1

I haven't been able to find this specific question on here yet so I thought I might post about it on here and see if I could get some supportive feedback/help.

I need this blog to be responsive and only show so many posts and a specific screen size. I assume I need to do this within the php code. I would like to have the blog I have looping on the front page to display 3 blogs from 800PX and up (screen width), 2 blogs display 450px-800px, and 1 blog display at 300px. Roughly. I find this easy to do with just plain html and css but I am new to this loop coding/php coding with wordpress and find this sort of confusing. I assume I need to ad some sort of "if this is this, then do this" in the php code?

In my plain demo html page I did it fine, but this is a whole new ball game. Here is my demo site. Scroll down toward the bottom and resize your screen to see what I mean.

Here is the actual Div site. Right now I have it responsive as it will resize, but it gets too sloppy as it gets smaller and would visually loop better to display only 2 as the screen gets smaller, and then 1 for mobile.

Here is the PHP and the loop code. Can one of you awesome individuals that truly know what your doing point me in the right direction? Then, can you give me advice on a book or something I can read to get better at this stuff so I don't come here bothering you all the time. 

<!-- BEGIN BLOG CALL-OUT SECTION --> 
        <div id="blog_section" class="clearfix">
            <div class="blog_posts_container">

                    
                     <?php 
$rp_query = new WP_Query( 'showposts=3' ); 
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
                   
                   <div class="post-wrapping-div">
                       <!-- Blog Thumbnail-->
                       <div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
                    
                       <!-- Blog Post Date/time-->
                       <p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
                       <span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
                       </p>
                    
                       <!-- Blog Title-->
                       <p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
                       <span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
                       </p>
                              
                       <!-- Blog Content-->
                       <div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
                       <?php the_excerpt(); ?>
                       <a href="<?php the_permalink(); ?>">Read More</a></li>
                       </div>
                  </div> 
                  <img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">


                      <?php endwhile; ?> </div> 
                      <? endif; ?>
                      <?php wp_reset_postdata(); ?>           
                
        </div>
<!-- END BLOG CALL-OUT SECTION-->
Tyrii
  • 173
  • 1
  • 4
  • 13
  • See here: http://stackoverflow.com/questions/24226050/execute-php-based-on-screen-size – Chris Burton Jan 22 '15 at 15:58
  • I have to leave shortly so no time for a full response but here are some quick pointers.... for one, learn to use Google Chrome's "inspect element" tool (or Firefox's equivalent) to test changes in your browser, which will save you a lot of time over changing your PHP/HTML/CSS and constantly refreshing. Your theme should have a style.css file (and maybe multiple css files) which is what you need to be tinkering with. Read up on media queries, which are essential to responsive layouts. That's all I have time to write right now, I'll try to check back later – Brock Amhurst Jan 22 '15 at 16:25
  • Also, the PHP and loop aspect makes it less complicated than you think. You simply need to find the class/id selectors in the CSS file and tinker with those, essentially the same as you would with a static HTML page – Brock Amhurst Jan 22 '15 at 16:28
  • So from that link I take it, it is not a PHP script that I need to add but most likely a javascript? I know how I could make it display differently with css, and make it go vertically but is it possible to make it display only two or 1 with just css? – Tyrii Jan 22 '15 at 16:29
  • You don't need JavaScript at all for that, you just need to use [CSS media queries](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp). So for example, if you want to make a particular box with the id "box1" disappear when the screen is less than 300px wide, you would do it like this: `@media screen and (max-width: 300px) { #box1 { display: none; } }` – Brock Amhurst Jan 22 '15 at 18:55
  • How do I do this within the Wordpress loop though? They are all being generated within that loop in one wrapper, floated left to be in one line horizontally. The loop defines how many are shown, which in this case it populates the latest three blog posts. I don't see a way to create a separate div class for each. I know how to use media screen just fine. I just do not know how to apply this within this particular problem. If you look at my links above, you can see in my demo site i did just as you suggest but this doesn't work the same within a php wordpress loop. If it does, i'm missing it. – Tyrii Jan 22 '15 at 19:27
  • Do you want to limit the number of posts that the loop outputs, or just modify the way those posts are displayed depending on screen size? – Brock Amhurst Jan 22 '15 at 19:45
  • I think you mean the latter, so I posted an answer explaining the steps. Hope that's helpful. If it is, please mark it as your accepted answer. If not, please ask for clarification and I'll do my best to help – Brock Amhurst Jan 22 '15 at 20:34

2 Answers2

1

  1. Open your blog post page in Google Chrome or Firefox. Right click on one of the blog posts and click "Inspect Element" (might be slightly different in Firefox but same idea). This will show you the CSS rules that are being applied to that particular element.

  2. Ensure you have the entire post selected in the inspector. You can do this by finding the element with the class "post" in the HTML displayed in the inspecor window. On the right hand side (using Chrome, and if the inspector window is on the bottom, not the side), you should see all the CSS rules applied to that element. One of them will be the class "post". These are the CSS rules that you want to start modifying first.

  3. Let's say you want 3 posts to be displayed side-by-side, per line, when viewed on a desktop screen of 1024px. You might set the following rules under .post {:

    .post { display: inline-block; width: 300px; }

Note that you can make these changes directly in Chrome or Firefox's inspector window. They will not actually modify your site and everything will be reset when you refresh the page, but this will help you test different CSS rules before making the "permanent" changes in your CSS file(s).

Now, since 3 x 300px is less than 1024px, you should see three posts displayed side by side on a desktop size screen, then three on the next line, etc. If you resize your browser window to make it smaller, you should notice that at around 900px wide, the third post will drop down to the second line. If you resize it further to around 600px wide, you'll see the second post drop down to the second line.

Once you have that basic concept down, then you can start doing more sophisticated stuff, but that's the basic idea. The example I gave doesn't even require using media queries, just basic CSS. You can also use things like "max-width" and pixels/percentages to accomplish a lot of "responsiveness" without the need for media queries.

Also important to note is that, by doing what I mentioned in step 2, you should be able to easily determine which CSS file you need to modify, as the name of the file should be on the right next to the CSS selector. So look for something like "style.css" -- whatever ".css" file is listed next to that element is what you need to be modifying.

Brock Amhurst
  • 497
  • 2
  • 5
  • Brock, have you tried what you are asking me to do? I've already tried this but you cannot make a different class for each blog. The reason being is because it is generated by the loop and they are all named the same. I use the inspector often and have tried your method already. This would be a different situation all together. I already have them displaying side by side. My issue is hiding one of them when I need to with a display:none or something of the sorts. – Tyrii Jan 22 '15 at 22:23
  • 1
    So I got some advice to add a php to spit out an incremented class name. Once I did that it assigned a new name class to each blog post. This in turn fixed my issue as now I can customize what shows up and what doesn't according to the screen size. was what did it for me. Thank you for trying to help Brock. :) – Tyrii Jan 22 '15 at 22:39
  • I still don't quite understand why you needed different class names in order to make it responsive, but anyway I'm glad you were able to get it figured out :) – Brock Amhurst Jan 22 '15 at 22:51
1

Here was the final working code (minus the obvious CSS I need to add to make it work).

<!-- BEGIN BLOG CALL-OUT SECTION --> 
        <div id="blog_section" class="clearfix">
            <div class="blog_posts_container">

              <?php $rp_query = new WP_Query( 'showposts=3' ); ?>

  <?php $post_counter = 0; //Set an initial counter to 0 before the loop ?>

  <?php if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>

   <?php $post_counter++; ?>

   <div class="post-wrapping-div <?php echo 'post-'.$post_counter; ?>">

                       <!-- Blog Thumbnail-->
                       <div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
                    
                       <!-- Blog Post Date/time-->
                       <p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
                       <span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
                       </p>
                    
                       <!-- Blog Title-->
                       <p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
                       <span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
                       </p>
                              
                       <!-- Blog Content-->
                       <div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
                       <?php the_excerpt(); ?>
                       <a href="<?php the_permalink(); ?>">Read More</a></li>
                       </div>
                  </div> 

                  <img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">


                      <?php endwhile; ?> </div> 
                      <? endif; ?>
                      <?php wp_reset_postdata(); ?>           
                
        </div>
<!-- END BLOG CALL-OUT SECTION-->
Tyrii
  • 173
  • 1
  • 4
  • 13