[SOLVED] Page Navigation for Post Widgets
I decided to take a different approach to my homepage and do something like this:
http://i.imgur.com/7Jn3ELu.png There's a widget for this but how do I edit the page navigation so that if I click say, page 2,3, etc, it shows the next recent set of posts and not the same exact ones as the homepage? it's going to take a while if i decide to do it by editing files instead of a widget. My website: asianstarsid.com |
I'm not quite sure I understand what you want to do. Are you saying that you want the blog posts to show up in columns? or are you just talking about the 'Related Posts' section of your page?
And if there is a widget that will do what you want, why code it into the theme? |
yea, i basically want my homepage to look like that image above without the "Related Posts" title. but the problem is that if you click on page 2, instead of it showing the next 10 recent posts in those columns, it's the same exact 10 posts as page 1. the page navigation doesn't work for the widget but it works for the excerpts above it. that's what i want to fix
i have the widget installed at the bottom of my site as an example. |
please export your settings (MTO->EXPORT IMPORT) and attach them to a reply
|
Hope I did it right.
|
It sounds like you want a masonry type of layout. It's not too difficult. You would first need to modify your postformat.php file to remove the post excerpt (i.e., the text description), and then rearrange the elements so your post title is underneath the thumbnail. The recent posts in the widget don't show a post date or author name, so I don't know if you want to keep them or leave them in.
Then you'll want to add some CSS that formats the posts across four columns (it looks like you'll have room for four in a row). You probably need to resize the font size for the post titles so they will fit in a narrower column. You'll also want to add some media queries to change the number of posts to two across when at a tablet width, and one post across at cell phone width. I created a sample page here that shows how to arrange posts in two columns. The principles are the same, you just need to make adjustments in the CSS for four columns. |
As @ CrouchingBruin said, it's not too difficult, but you are going to have to play with it a bit. Here is some sample code I used to do it.
WARNING: do an export of your current settings and save them so you can get back to them if you need to. Index.php HTML Code:
<!--<div id="container">--> HTML Code:
<div id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?>> HTML Code:
.post {float: left; width: 20%} |
thanks for the help guys. i'll see what i can do although i prefer to keep using the Yuzo widget and somehow fix the pagination. it would save a lot of time in case i decide to switch to another layout since they have a couple of those on the widget.
let's say i decide to put 15 posts on each page. first 5 posts (same as image above) middle 5 posts (only title of post, exactly like a list) last 5 posts (same as image above) how would i do that? |
What have you tried?
The only way I dould tell you is if I did it myself first and then I would be doing your work. The best way to learn is to dig in and try things, experiment and see what happens. |
i was in the middle of changing the layout but my website isn't reflecting the changes. suddenly most of my homepage isn't showing and there's a slight freeze but the actual posts are fine. i tried emptying the cache and importing settings but my homepage still looks odd. i downloaded other themes and they work so not sure what happened here. i talked to my host and they said it was a theme issue.
|
1 - when ever you are changing your design/layout, you should first do a complete backup - database and all files.
2 - you should do the changes on your test site before doing them ion your live site 3 - never use a caching plugin whild doing development 4 - when something is not going right - disable ALL your plugins to see if there is a conflict not knowing what you were changing makes it impossibe to give you any specific guidance. If other thmes are showing multiple posts, then probably something you changed in the theme virtual code is teh issue. Do an export of the theme, then go to each of the virtual templates and reset it - then test your page and see if it is fixed. If it is still broken, go to the next virtual template and reset if and test again. This way you should find the virtuale template that is the cause. You can then make a copy of the existing one, re-import the export you made and compare the 'bad' template to the goos one to see what is going on. |
thanks, it was the postformat.php that was causing problems.
i decided to go with two columns so i changed the css to HTML Code:
.post {float: left; width: 50%} this is what it looks like: http://i.imgur.com/YgjY8HZ.png |
try changing your index.php to this:
HTML Code:
<!--<div id="container">--> |
^that code moved the widget in the right place. i'm still trying to figure out how to fix the white space in the two columns of posts.
|
To get rid of the extra white space, add this CSS to the end of your various.css file:
Code:
.blog .hentry:nth-child(odd) { |
^you are right. two divs were causing problems so i removed them and left Ads3_Widget.
also added this to remove white spaces outside of the first page: Code:
.search .hentry:nth-child(odd) { http://i.imgur.com/07fHxDH.png i removed margin-bottom: 3px; from .post-date which worked for this post, but i don't think this works for longer titles. |
It's very hard to guess at what exact changes you have made....
|
sorry, forgot to attach the file
|
Quote:
as a matter of fact, if you make the window small enough, all the text shifts under the images. |
You should be able to prevent the text from flowing under the thumbnail by enclosing the image (with it's link) in a DIV and the date and title in a separate DIV, but at the same level. Then set the widths of those DIVs to 50%, float the thumbnail DIV to the left and the title DIV to the right. See this page for what it should look like.
|
1 Attachment(s)
^I tried your way but for some reason the titles were too far to the right so I added:
@media only screen and (min-width: 760px) { .entrytitle-homepage { margin-left: 105px; } } this seemed to solve it. i did some other css changes and don't see anything else that needs fixing so here's the finished site. |
All times are GMT -6. The time now is 03:30 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.