I have been trying to apply answers provided on this forum regarding Wordpress pagination on static pages, but cannot seem to make them work on my page.
The closest I was able to make was a pagination system loading a page full of posts that were not even uploaded as excerpts but provided in complete form.
The answer I am looking for is for "pagination" to upload older posts on the same front page of the website whenever i click "Older" posts, and the other way around with "Newer".
My Wordpress reading settings are as follows:
A static page
Front page: Home,
Posts page: Home
My front-page.php code is (nested withing a column of my page using bootstrap) :
<!----- POSTS COLUMN BEGIN ------------->
<div class="col-xs-12 col-sm-8 col-md-8">
<?php
query_posts('posts_per_page=5');
while(have_posts()) : the_post(); ?>
<date class="text-muted"><?php the_date("m.d.Y") ?></date>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<hr>
<?php endwhile; wp_reset_query(); ?>
<br >
<!---- PAGINATION BUTTONS BEGIN ------->
<nav>
<ul class="pager">
<li class="previous"><span aria-hidden="true">←</span>Older Posts</li>
<li class="next">Newer Posts <span aria-hidden="true">→</span></li>
</ul>
</nav>
<!---- PAGINATION BUTTONS END --------->
</div>
<!----- POSTS COLUMN END ------------->
Currently functions.php does not contain anything regarding pagination. I have also left the "Older" & "Newer" buttons in the code.
Thank you for your help in advance!
Related
I'm using the <!--nextpage--> function to page break and split the page on Wordpress.
The problem is, whenever <!--nextpage--> is inserted, the position of sidebar is moved to where it shouldn't be.
It's like this on page.php:
<div class="main">
<?php
if (have_posts()) :
...
?>
<?php wp_link_pages(); ?>
</div>
<?php get_sidebar(); ?>
So if I understand correctly, .main and get_sidebar are on the same level.
But when I actually make some page using this template, an output is like this:
<div class="main">
<div class="section">
...
<div class="content">
// pagination is inserted here
</div>
<aside class="sidebar">
...
</aside>
</div>
</div>
In other words, get_sidebar(aside tag) automatically moves into .section.
This is extremely confusing to me, and really don't know what to do here.
Why does Wordpress decide to put it inside of .section? Why can't it be faithful to the template?
Now the sidebar is positioned at the end of content instead of being on the right side.
What are the possible causes and solution to this issue?
Thank you for reading.
I'm practicing WordPress and are now stuck.
When I look at front-page.php in my browser, all pictures are visible, but when I look at page.php in the browser, none of the images are visible,
They both have identical paths to some images, yet page.php wont display any pictures, it is like it cant find the images or something.
I have tried to hardcode the img path, but with no luck.
Below is my Page.php code
<?php get_header();?> <!--- There are an image inside the header aswell, it will not display when I look at page.php in browser--->
<div class="container pt-5 pb-5">
<?php if (have_posts()) : while(have_posts()) : the_post();?>
<div class="row rounded p-5">
<?php the_content();?>
</div>
<?php endwhile; endif;?>
<img src="wp-content/themes/Newtheme/bilder/cosmic-heart-of-the-universe-shawn-dall.jpg">
</div>
<?php get_footer();?>
I need help to display post featured image in my homepage in wordpress. I think I miss something.
<!-- POST FEATURE IMAGE-->
<section id="project-features">
<div class="container">
<div class="section-header">
<h2>PORTFOLIO</h2>
<div class="row">
<div class="col-sm-4">
<!--feature image, if you not uploaded yet nothing happen-->
<?php
if(has_post_thumbnail()){
the_post_thumbnail();
}
?>
<img src="<?php the_post_thumbnail(); ?>" alt="aaaa">
</div><!-- end col-->
</div><!--end row-->
</div><!--end section header-->
</div><!-- end container-->
</section><!--end project features-->
This should be simple. Enable post thumbnails in functions.php, read all of them on your frontpage.php, style them as needed and make permalinks to original posts where you have pictures loaded using WordPress media.
It's pretty simple. If you have knowledge on PHP and WordPress then you can create a loop of your post then you can simply add a permalink to your post detail and only print out the featured image on the post. You can also add a div on hover and print the post title on it.
I'm using Wordpress CMS. I Creat Post and page for particular Category. I want to send the post and page item through respective Category. And also I want to control the number of showing post in category. How can I send the post and page item in category. I have attach bellow normal coding. Plz help me.
<?php while(have_posts()): the_post();?>
</div>
<div class="category-page">
<div class="cate-inn ">
<h2><a href="<?php the_permalink();?>"> <?php
the_title();?></a></h2>
<div class="cat-image fix">
<a href="<?php the_permalink();?>"> <?php
the_post_thumbnail();?></a>
</div>
There is a function in WP that should help you with that.
You can find info on it here : http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
I have a ready to go snippet here to help you
https://snippetbox.xyz/5c3db100112bca204644/
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"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
<?php the_excerpt(); ?>
Read More</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-->
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.
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.
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.
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"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
<?php the_excerpt(); ?>
Read More</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-->