Question about home page
-
I’m trying to make it where my front page does not show ALL posts, but just the first three (i.e. the three top columns). However, when I try to set up a “static page” it only allows me to use a page, not a category. Makes sense, I suppose.
If you visit my blog, you will notice how there are TWO “News Ticker” menu items at the top. I want to make the home page like the SECOND News Ticker item (furthest to the right on the menu). Where only the top 3 columns are visible, not the post that I made for the “Blog” page. You will notice that if you click on the left News Ticker item that it brings up ALL posts.
Is there a way around this?
The blog I need help with is: (visible only to logged in users)
-
You can change your reading settings to specify the number of posts you want to show on the home page and on any archive pages.
-
I think that may work! Is there a way to set it to three articles on my home page (i.e. News Ticker), and infinite on Blog page?
-
For instance, if you look at the two pages listed below you will notice that I’ve separated them by categories. I want the News Ticker (home) page to only list the first three. It looks perfect right now, but I’d also want the “Older Posts” button removed. I only want those top 3 on the News Ticker page. It will never change from those three posts (number-wise, substance will change).
Page 1 – News Ticker: https://grandstandnews.com/
On the second page, Blog, I want the posts to be unlimited. I will be adding a post to this page weekly/bi-weekly and I don’t want it limited to just three. The post count on this page will be constantly added to in number.
Page 2 – Blog: https://grandstandnews.com/category/blog/
Is this possible? I think we are on the right track… just not sure if we can go all the way. Thanks for your help!
-
The setting is applied to both your main blog page (your home page) and any archive pages (like the “blog” category page).
One workaround that might be effective is to leave the reading setting as it was so your blog category page will show more posts as you add them and then switch your home page to show a static page. Then on the new page you create and set as your front page you can use the display posts shortcode which lets you set a number of recent posts to show. Using the widget might make these posts look a little bit different from how they’re displayed now, but try it out and see what you think.
-
Yeah, I’ve thought about doing it this way. However, I’m not sure if I can get the “page” to take on the same appearance of how I had it set up with the categories. By that I mean, I haven’t figured out a way to get the posts assigned into the three columns on the page the same way I had it with the News Ticker category page from earlier.
Is there a way for the static page to take on the same appearance of the category page? Or a way to divide the page into the three columns like I had it originally?
-
If you set the static front page up with the display posts shortcode and let me know when it’s published I’ll have a look and try to come up with some CSS that will make it look more like the regular posts view.
-
Hmmm… never tried this before. Seems relatively straightforward, though. Here’s my first shot at it:
I tried the [display-posts category=" "] code. The category I want to display is “news ticker,” so I inserted: [display-posts category="news ticker"]
It brings it up with a bullet point display, not the actual post: https://grandstandnews.com/
-
You need to look through the other options and pick out the ones you want, something like this:
[display-posts include_excerpt="true" posts_per_page="3" category="news-ticker"] -
Ahhh. This is closer. Still displaying bullet points and in a single column.
Goal is to decrease text size to about 80% of what it’s at now, three columns and no bullet points.
-
Give this a shot, it seems to cover most things:
ul.display-posts-listing { list-style: none; margin: 0; } .display-posts-listing li.listing-item { width: 33.3333%; padding-right: 15px; float: left; clear: none!important; font-size: 0.8em; } .display-posts-listing li.listing-item .title { display: none; } .display-posts-listing li.listing-item:nth-child(3) { padding-right: 0; } @media screen and (max-width: 767px) { .display-posts-listing li.listing-item { width: 100%; padding: 0; float: none; clear: both!important; } } -
Wow – you’re awesome! That helped a lot. Just a few more wrinkles to work out – but well on our way!
Any idea why the third column allows for more text on the first line? See how the first line of the first two columns is “JUDGE REJECTS REQUEST FOR HILLARY SWORN,” but the third column adds “EMAIL” to the line.
I think it has something to do with this line?
}
.display-posts-listing li.listing-item:nth-child(3) {
padding-right: 0; -
Odd. I switched to my other laptop (wider screen) and it shows them all the same? They all go to “EMAIL” on the first line. This monitor cuts off the first two columns at “SWORN.”
When I open Internet Explorer on the wider laptop screen, it cuts off at “HILLARY” in the first two columns and adds “SWORN” on the third one.
Is that normal?
-
All browsers work a bit differently so that’s not a completely crazy thing to see happen.
Try changing the right padding to margin instead then adjusting down the width until the three blocks all fit in one row.
-
Ah, okay. Well, if there’s no way around that then I won’t complain.
Do you have code for the second part of your response? I’m not a CSS guy at all, so I usually just plug and play :/
Also, is there code to remove the titles on these pages/category pages (i.e. News Ticker, Blog, Polls)?
-
In the code I gave you before change the two occurrences of padding-right to margin-right and set the width that’s currently 33.3333% to something slightly less, say 32.3%.
Here’s how to hide the page titles:
body.page .entry-title { display: none; } -
Awesome! That removed the news ticker header. The blog “page” is actually a category link (same for polls page). How do I remove the category headers?
I also want to remove the “/ BLOG” next to the date that hovers below each article on the Blog category page. Is there CSS to accomplish these things?
-
Here’s the code for those specific categories:
body.category-blog .page-title, body.category-polls .page-title { display: none; }And for the category link on your posts, this will hide all categories be they blogs, polls or anything else:
.entry-meta .cat-links { display: none; } -
Perfect. Meant to include this in last comment and forgot…
Is there a way to remove the rollover effect on the posts? Specifically, if you look at the “Blog” posts you will see a large, translucent “G” appear when the mouse hovers over the image. Can we remove this? Thanks!
-
You can get rid of the letter, line or both:
.hover__letter { display: none; } .hover__line { display: none; }
- The topic ‘Question about home page’ is closed to new replies.
WordPress.com Forums 