Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   [SOLVED] Page Navigation for Post Widgets (http://forum.bytesforall.com/showthread.php?t=23493)

AsianStarsID May 27, 2016 02:04 PM

[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

juggledad May 27, 2016 03:13 PM

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?

AsianStarsID May 27, 2016 03:59 PM

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.

juggledad May 27, 2016 05:26 PM

please export your settings (MTO->EXPORT IMPORT) and attach them to a reply

AsianStarsID May 27, 2016 05:43 PM

Hope I did it right.

CrouchingBruin May 27, 2016 11:31 PM

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.

juggledad May 28, 2016 04:21 AM

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">-->

<?php get_header(); ?>

<div id="main" class="row">

        <div id="content" class="cf col12">               
                <?php bfa_content_nav( 'multinav1' ); ?>               
                <?php bfa_loop( 'postformat' ); ?>   
        <div class="Ads_Widget"><?php dynamic_sidebar( 'Ads_secondpost_widget' ); ?></div>   
        <div class="Ads2_Widget"><?php dynamic_sidebar( 'Ads_fourthpost_widget' ); ?></div>               
        <div class="Ads3_Widget"><?php dynamic_sidebar( 'Ads_tenthpost_widget' ); ?></div>
               
        </div>
    <div class="row col12"><?php bfa_content_nav( 'multinav2' ); ?></div>       

</div>
       
<?php get_footer(); ?>

<!--</div>-->

postformat.php
HTML Code:

<div id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?>>

        <div class="post-bodycopy cf">       
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <div class="container"><?php the_post_thumbnail('<div class="postleft">', '</div>'); ?></div>
                </a>
      <br />
              <a class="post-readmore" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php _e( 'read more ?', 'montezuma' ); ?>
        </a>
        </div>
        <div><h2>
                <span class="post-format"></span>
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark" class="entry-title"><?php the_title(); ?></a>
      </h2></div>
</div>

and I added this CSS to the end of various.css
HTML Code:

.post {float: left; width: 20%}

.post-bodycopy {
        /* text-align:                justify; */

  border: solid 1px red;
}
img.wp-post-image {
    clear: both;
    float: left;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
}
img {
    border: 5px solid green;
    display: block;
    height: auto;
    max-width: 50%;
    width: auto;
    z-index: 99;
}

this will give you a start. When you get it done, please post your export in case someone else wants to try it out.

AsianStarsID May 28, 2016 02:31 PM

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?

juggledad May 28, 2016 04:05 PM

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.

AsianStarsID Jun 1, 2016 07:09 PM

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.

juggledad Jun 2, 2016 06:51 AM

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.

AsianStarsID Jun 5, 2016 02:17 PM

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 works fine with col12 like you provided but it looks off when i change it to col8 which i prefer to keep since the col4 widget is in the same place. i don't know if it's a css issue because i tried changing a lot of padding and margins but it doesn't work.

this is what it looks like:

http://i.imgur.com/YgjY8HZ.png

juggledad Jun 6, 2016 03:03 AM

try changing your index.php to this:
HTML Code:

<!--<div id="container">-->

<?php get_header(); ?>

<div id="main" class="row">

        <div id="content" class="cf col8">
        <?php bfa_content_nav( 'multinav1' ); ?>               
                <?php bfa_loop( 'postformat' ); ?>     
        <div class="Ads_Widget"><?php dynamic_sidebar( 'Ads_secondpost_widget' ); ?></div>     
        <div class="Ads2_Widget"><?php dynamic_sidebar( 'Ads_fourthpost_widget' ); ?></div>               
        <div class="Ads3_Widget"><?php dynamic_sidebar( 'Ads_tenthpost_widget' ); ?></div>         
                <?php bfa_content_nav( 'multinav2' ); ?>
    </div>
        <div id="widgetarea-one" class="col4">
                <?php dynamic_sidebar( 'Widget Area ONE' ); ?>
        </div>

  </div>
       
<?php get_footer(); ?>

<!--</div>-->


AsianStarsID Jun 6, 2016 12:43 PM

^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.

CrouchingBruin Jun 6, 2016 02:16 PM

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) {
  clear: both;
}

However, you will see a blank spot between the 3rd & 4th post entry. I think it's because there's a DIV in there with a class of Ads2_Widget. I don't know if that DIV needs to be there, because it's empty, so try removing it.

AsianStarsID Jun 8, 2016 04:34 PM

^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) {
  clear: both;
}

.archive .hentry:nth-child(odd) {
  clear: both;
}

when my titles are too long, the end of the title goes underneath the image. how do I make the whole title go to the right of the image?

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.

juggledad Jun 8, 2016 05:22 PM

It's very hard to guess at what exact changes you have made....

AsianStarsID Jun 8, 2016 05:33 PM

sorry, forgot to attach the file

juggledad Jun 9, 2016 03:15 AM

Quote:

when my titles are too long, the end of the title goes underneath the image. how do I make the whole title go to the right of the image?
The element resizes when the window gets smaller. Shifting things around is part of a responsive theme. And since at any window size, there is only so much space next to the image, it naturally spills under the image once the text is too many characters.

as a matter of fact, if you make the window small enough, all the text shifts under the images.

CrouchingBruin Jun 11, 2016 12:58 AM

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.

AsianStarsID Jul 2, 2016 12:41 AM

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.