Posted 1 year ago #
Can anyone please explain how to go about doing this?
http://www.transformationpowertools.com/wordpress/grid-posts
I found his articles confusing, because they don't go step by step about what to add, so I'm finding myself a bit lost. Help would be greatly appreciated.
thanks for pointing this out.
which post in particular?
if you mean 'Multi-Column Grid-Style Posts in WordPress', there are simpler methods to create posts in columns or grids, also pointed out in my latest edit of the post.
if you have an example template, where you want to integrate some of the code, i can possibly talk you through in the forum.
you could describe your problem in more details, and paste the code of your template (what you have so far) into a http://pastebin.com/ and post the link to it here; also a link to your site.
Posted 1 year ago #
I have absolutely no code for this. I'm just using a default twentyten theme.
When you click that link, I want to do exactly what he has. A predefined size grid where my posts fall into. Does that help at all?
EDIT: I see it's your website. Hahaha. Nice to meet you. But yes, I would like to recreate what you have going on when you click Here exactly as you have it.
You have 3? articles about it and I don't know which one to use. Also, whenever I try to use any of your tutorials, you don't say where exactly to put what code so as a very very very new person to wordpress I get confused. Like I said before, any help is greatly appreciated.
actually, this post 'Playing with columns – stacking posts in a grid' refers directly to Twenty Ten, and has links to example files for use with Twenty Ten.
you might need to read the docu about:
page templates
http://codex.wordpress.org/Pages#Page_Templates
and possibly:
the loop
http://codex.wordpress.org/The_Loop
query_posts
http://codex.wordpress.org/Function_Reference/query_posts
post thumbnail
http://codex.wordpress.org/Function_Reference/the_post_thumbnail
themes in general
http://codex.wordpress.org/Theme_Development
and you will need quite an understanding of css to get the formatting done.
if you get stuck in details, it will help if you can post a link to your site (work in progress).
Posted 1 year ago #
So all I have to do is follow the steps after "addendum"?
"addendum:
this method can be implemented into the Twenty Ten theme, using the new ‘get_template_part()’ function to use custom loops.
for the code see:
loop-grid.php;
page template;
css styles."
Or do I have to do anything above "addendum" aswell?
you can use the files after 'addendum' to work with;
as far as i remember, there is no code from above the 'addendum' needed for the use in twenty ten.
because of the very 'spacious' design of twenty ten, the first result might look a bit odd.
Posted 1 year ago #
Well, to be totally honest. I made a website. And I "integrated" it into wordpress later on. Basically, I changed the header.php index.php and footer.php files to match my website. That was a while ago. I didn't touch the theme at all after that.
Now that I want this grid layout I took the code for loop-grid.php and I created my own loop-grid.php file and added it successfully.
Next, I took the code for "page template" and totally copied over Page template (page.php)
Finally, I took the code from css style and added it to the very top of my style sheet (style.css)
Now, it still gives me my posts going straight down... so it's not working. I'm doing this for a small flash game site/project. Hence every post is a "game".
Next, I took the code for "page template" and totally copied over Page template (page.php)
with what you have done, now every static page should use the template.
but i don't see any static pages in your site.
the front page is (normally) generated by index.php.
if you want to change the front page to grid layout, you have to apply the code to index.php;
or you could possibly create a static front page: http://codex.wordpress.org/Creating_a_Static_Front_Page
otherwise, re-read the concept of page templates.
Posted 1 year ago #
Oh! Alright, so the page template code goes into index.php.
Alright, I did that now, but I just get a list...
I feel as though the loop-grid.php isn't working. Do I have to add any special functions or anything?
Is there anyway to test that loop-grid.php is working?
EDIT: I removed the code for "Leave a comment" in "loop-grid.php" and it updated. Any other ideas?
EdIT 2: Yeah, loop-grid.php definitely works. But something has to be stopping it from working. I removed all of my personal code for the website, just to make sure it wasn't interfering but, it didn't work either. Something in loop-grid.php must not be working. What do you think?
At the end of all of this I think I owe ya a few beers... what's the price of one of those?
main thing: the styles to make the columns work, were missing:
/* styles for stacking grid posts
* set the width to allow the chosen number of columns to fit into the available space, incl. margins */
.col { float:left; width: 145px; padding:5px;
margin-right: 10px; margin-bottom: 20px;
overflow:hidden; }
/*optional style for first column*/
#col-1 { margin-left:0px; }
/*optional style for last column - set the number to your chosen number of columns*/
#col-4.col { margin-right:0px; clear:right; }next task - to get a fixed height for each post, ...
Posted 1 year ago #
oh my gosh! It worked! It worked! Ugh. So happy right now. If you could stick it through to just help me with the rest it would be beyond appreciation from me. Thank you.
SO next, height...?
SO next, height...?
start be redefining what you want to show in the post, how large the fonts are going to be, if you want a thumbnail, if you want to have the same fixed height for each post ....
to see where your posts are, try and add this style to the others:
.col .post { height:350px; overflow:hidden; border: 1px dotted #fff; margin-bottom: 10px; }
if you leave height:350px; away, the posts will stack like 'tetris' ...
Posted 1 year ago #
!!! alright. It looks like I got a nice border and a fixed height.
I would like to copy right off of yours though. As in (image in background) 100 x 100. And I would like the title to appear in smaller text in a box on top of (overlaying) the image. Basically...
How do I get from this to this?
start by adapting the size of the fonts;
add a post tumbnail image to the post;
this thumbnail will be used as a background image:
related article: http://wpengineer.com/2123/use-wordpress-post-thumbnail-as-background-image/
Posted 1 year ago #
Alright, I inserted the code directly at the bottom of functions.php. I'm not sure how I set the thumbnail for each post. Do I just set a featured image? And in which file should I play around with the font size?
EDIT: Yeah, I don't think the code I inserted worked. A little clarification on where that goes please?
And I guess, once you tell me where to change the font... that should be it! So close!!! Thanks!
A little clarification on where that goes please?
the link was not meant to take the code for 'copy/paste'; it is for inspiration ;-) that comes later; first, get a post thumbnail image into the posts.
where to change the font
is all in style.css;
add these new to style.css (as example only, use as many formats as you like):
.col h2.entry-title a { font-size: 18px; } /*title*/
.col .entry-meta { font-size: 12px; } /*posted on, etc*/
.col .entry-meta a { font-size: 11px; } /*links in posted on*/
.col .entry-summary { font-size: 16px; } /*excerpt, content*/
.col .entry-utility { font-size: 12px; } /*posted in, comment*/
.col .entry-utility a { font-size: 11px; } /*posted in, comment links*/general tutorial:
http://www.w3schools.com/css/
http://www.w3schools.com/css/css_font.asp
intro into featured images / post thumbnails:
http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/
Posted 1 year ago #
Alright, so I added:
add_theme_support( 'post-thumbnails' );
And it doesn't seem to work. That should add the UI for it when I edit a post... correct? I just added it to the end of my functions.php.
Also, just letting you know that the styling worked, and I'll work on it more once I can figure out the thumbnails. That seems to be the last part. Thank you again for your time and patience.
EDIT: So like I said, I only added the one line of code. In my mind a new UI box should come up for posting a thumbnail. Do I just use the featured image thing?
Do I just use the featured image thing?
yes - that's the one.
to output the post-thumbnail/featured image into the post, you can use the_post_thumbnail() http://codex.wordpress.org/Function_Reference/the_post_thumbnail
for the next steps, can you paste the code of your template (could be loop.php?) into a http://pastebin.com/ and post the link to it here?
Posted 1 year ago #
Alright, so like I said I added:
add_theme_support( 'post-thumbnails' );
To my functions.php (http://pastebin.com/b37hK36N)
Like I said, I'm under the impression that this single step makes the thumbnail option show up when creating a new post. I don't see it after adding the code. Therefore... I cannot add a thumbnail.
Hence, it seems like adding the code for actually outputting the thumbnail in the loop.php wont do anything.
EDIT: Just to keep things rolling, I added the code you gave me to put into my loop.php Here it is
Like I said, I'm under the impression that this single step makes the thumbnail option show up when creating a new post. I don't see it after adding the code.
click the 'screen options' tab near the top right of the 'edit post' page - tick (at least) the 'featurd image' box.
I added the code you gave me to put into my loop.php Here it is
my mistake - i was referring to the code of the front page loop - loop-grid.php (?).
can you paste that?
Posted 1 year ago #
Sweet! Yeah, looks like it's working!
Just to let you know... I already have thumbnails for all of the games. They are all 100px x 100px. If that changes anything...
if the thumbs are smaller than the post div, they will be tiled in the background - that is what i do in my site as well.
to move the featured images into the background, change line 46 of loop-grid.php:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
to:
<?php $bg_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php if( $bg_img ) { echo ' style="background-image: url(' . $bg_img . '); "'; } ?>>and remove line 67:
<?php the_post_thumbnail(); ?>make a backup copy berfore editing.
Posted 1 year ago #
Alright, so I changed my code. Here it is.
But, now my thumbnails disappeared and they're not showing up at all. You think my background (which is an image in the style sheet) is overwriting it?
my bad - made a mistake:
this line (line 46):
<?php $bg_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ); ?>needs to be modified into:
(the second short line needs to be added)
<?php $bg_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ); ?>
<?php $bg_img = esc_attr($bg_img[0]); ?>and maybe edit the styles a bit:
.col .post { height:220px; overflow:hidden; border: 1px dotted #fff; margin-bottom: 10px; }
.col .post:hover { background:none!important; }made the posts smaller and added a line with a :hover effect.
Posted 1 year ago #
Alright, you can check the page now. I'm using thumbnails that are 100 x 100 but, they're repeating across. I could just resize the entire column to 100 px in width but when I do it gets all weird... it does this
I tried adding an additional column by doing this in the css
/*optional style for last column - set the number to your chosen number of
columns*/
#col-4.col { margin-right:0px; clear:right; }to
/*optional style for last column - set the number to your chosen number of
columns*/
#col-5.col { margin-right:0px; clear:right; }But, it didn't work...
So now, can you tell me how to have 5 columns? And I'll resize them to 100 x 100.
Also, where do I go to add more posts to the page.
Also, where do you recomend getting rid of "Posted on May 25, 2011 by adminLeave a comment" below every game title? Thanks so much! It's coming along quite well.
I tried adding an additional column by doing this in the css
good idea - but there is also the number of columns to change in the code;
line 35 of loop-grid.php ( http://pastebin.com/xBxdpM7d ):
<?php $num_cols = 4; // set the number of columns herefor more than 20 posts, either change it in the 'settings' 'reading' in your dashboard;
or add this into line 12 of the loop-grid.php (http://pastebin.com/xBxdpM7d ):
<?php global $query_string; query_posts( $query_string .'&posts_per_page=20'); //set number of posts ?>
change some styles, for example:
.col { float:left; width: 110px; padding:5px;
margin-right: 10px; margin-bottom: 20px;
overflow:hidden; }
#col-1 { margin-left:5px; }
#col-5.col { margin-right:0px; clear:right; }the rest is fine-tuning of margins, paddings, font-sizes, etc.
imho, it gets quite difficult to read and recognize, if the squares are getting too small.
Also, where do you recomend getting rid of "Posted on May 25, 2011 by adminLeave a comment"
remove line 50 to 61 of loop-grid.php ( http://pastebin.com/xBxdpM7d ):
<div class="entry-meta">
<?php
printf( __( '<span class="meta-prep meta-prep-author">Posted on </span><a href="%1$s" title="%2$s" rel="bookmark"><span class="entry-date">%3$s</span></a> <span class="meta-sep"> by </span> <span class="author vcard"><a class="url fn n" href="%4$s" title="%5$s">%6$s</a></span>', 'twentyten' ),
get_permalink(),
esc_attr( get_the_time() ),
get_the_date(),
get_author_posts_url( get_the_author_meta( 'ID' ) ),
sprintf( esc_attr__( 'View all posts by %s', 'twentyten' ), get_the_author() ),
get_the_author()
);
?><span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
</div><!-- .entry-meta -->
Posted 1 year ago #
Okay, looks like I'm almost done! So close, the next thing is only 3 things that bother me but, are not necessarily necessary.
1. The background color of the title font to be spread across the entire line. (Just how you have your's on your website)
2. The image to be clickable to get to the post. Only clicking the title now get's me to the post.
3. The title to be up at the top, not down like 10px or whatever it is.
for 1) and 3):
in the styles, change this:
.col h2.entry-title a {background-color: black; font-size: 12px; } /*title*/
to:
.col h2.entry-title a { font-size: 12px; display: block; height:100px; width:100px; } /*title*/
.col h2.entry-title a span {background-color: black; display: block; width: 100px; padding: 5px 0; }
.col h2.entry-title { margin-top: 0; }for 2) edit the template file; find:
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>and add a span tag around the post title, by changing it to:
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><span><?php the_title(); ?></span></a></h2>
Posted 1 year ago #
I did 1 and 3 but, 1 doesn't work still...
The background color doesn't show... I'm going to try number 2 now, I'll keep you updated.
EDIT: The template file is...?
Posted 1 year ago #
Alright, I added the span tag around the post title in loop-grid.php and that actually fixed the background color as well. Now, the last thing I would like to change is just when I hover over the image I would like it to say "Play (Title of Game)" instead of "Permalink to (Title of Game)".
This topic has been closed to new replies.
