[Resolved] Queries on Blog and widget link

[David]

On your blog page you have a search form between the Hero and the Post list.
How did you add that ? I assume it was using a GP Element, if so, edit that, and add your new [mycatelist] shortcode before or after that. Once its there and i can see it, ill provide the necessary CSS.

[Janani]

Dear David

Yes, I have done that, you can see it now in the Blog page. https://www.devshishu.com/blog/.
But, when I click on the category, I can see the list of posts in that category, but with that big space between the lines as before. However, this space is not there when we see the full list of posts in the blog page because of the css code you had given me before. Hope you understand. Please let me know if I am not clear, I shall explain better.

[Fernando]

Can you try changing the code here: https://generatepress.com/forums/topic/queries-on-blog-and-widget-link/#post-2412376′

To this:

function getCategoryList() {
    ob_start();
    echo'<ul class="cu-cat-list">';
        wp_list_categories('orderby=name&show_count=1&title_li=');
    echo'</ul>';
    return ob_get_clean();
}

add_shortcode('mycatelist', 'getCategoryList');

Then, add this in Appearance > Customize > Additional CSS:

ul.cu-cat-list {
    margin-top: 10px;
}

This should add spacing for the list. You may alter 10px to your preferred value. Does this work?

[Janani]

Hi Fernando

Thank you, I changed and gave the codes as you said, but it remains the same. To be clear, I need two things –

1. To design the category list as in this web page- https://www.tarabrach.com/guided-meditations/
2. When someone clicks on the category, the list of posts appear, but the spacing between them needs to be reduced to normal as in the blog archives page.

Please guide me on how we can achieve this. Many thanks for your help.

[Fernando]

Let’s address #1 first.

Can you replace the first code here: https://generatepress.com/forums/topic/queries-on-blog-and-widget-link/page/2/#post-2414275

To this:

function getCategoryList() {
    ob_start();
    echo'<ul class="cu-cat-list">';
        wp_list_categories('orderby=name&show_count=0&title_li=');
    echo'</ul>';
    return ob_get_clean();
}

add_shortcode('mycatelist', 'getCategoryList');

Then, add this in Appearance > Customize > Additional CSS:

ul.cu-cat-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px
}

ul.cu-cat-list li {
    list-style: none;
}

ul.cu-cat-list li:not(:last-of-type) {
    padding-right: 6px;
}

ul.cu-cat-list li:not(:last-of-type):after {
    content: "|";
    padding-left: 6px;
}

ul.cu-cat-list li li {
    display: none;
}

This should relatively output your categories similar to the link you provided.

Can you add another category as well so we can see how it looks?

[Janani]

Dear Fernando

Yes, I have provided the new codes you have given, and there is a visible difference. I have also changed the categories of one of the posts, so that you can see the styling. Could you also please give the border and colour to this styling similar to the one in the other website? However, the problem remains, that when I click on each category, there is too much spacing between two post titles which need to be rectified. You would not be able to see this now, as I have changed the categories of one of the posts, but this issue is still there. Please help.

[Fernando]

I see. You’ll just need to alter the padding and margin values. I updated the second (CSS) code above. Can you try that?

[Janani]

Dear Fernando

Thank you very much for your support and help, really appreciate it. Yes, I have given the CSS code you provided, and it looks much better. And if there is a box (rectangle shape) around these categories with a grey background, it would look really professional. Also, if the font size can be a little bigger, say at 20px. Can you tell me how to bring that in?

Also, please click on the ‘Mindful living’ category and you will see that the list of articles under that category but with too much spacing, which does not look good. What can we do to make the spacing proper. David gave a CSS code to make the spacing in the main blog archive become normal, because we faced a similar issue there. Here it is below – should we do something like for the category list also?
:is(.blog, .archive) .inside-article > :is(.entry-meta, .entry-summary ) {
display: none;
}

And last, can you tell me how to bring the blog archive list of articles to the center of the page?

I know I am asking too much of you, but seriously I do not see any other option. My website developers were at a loss on how to bring this category list in, so I am reaching out to you as the last option. Kindly bear with me.

Kind regards
Janani

[Fernando]

Let’s tackle the first issue and move on to the other ones afterward to avoid confusion.

Yes, we can help you with the font size and the grey background. How are you currently adding [mycatelist] shortcode? Is it still through a Block or Hook Element?

Would you like it sticky as well as it is in the reference site?

[Janani]

Dear Fernando

Yes, a sticky mode would be preferable. I added the short-code as a block in a hook element.

[David]

For the spacing issue.
Change this CSS:

.blog article.post {
    margin: 0;
}

to:

:is(.blog, .archive) article.post {
    margin: 0;
}

[Janani]

Thank you David! This resolved the spacing issue.

Now, just my two more queries before we can close this – can you please help provide the codes for box (rectangle shape) around this category list with a grey background, similar to this website link – https://www.tarabrach.com/guided-meditations/. And also to increase the font size to be a little bigger, say at 20px.

And last, can you tell me how to bring the blog archive list of articles to the center of the page instead of the standard left alignment?

[Fernando]

Yes, we can tell you how. Can you set the Hook Element to hook to after_header? Give it a priority of 100 as well.

Then, add this in Appearance > Customize > Additional CSS:

ul.cu-cat-list {
    background-color: #F0F0F0;
    justify-content: center;
    font-size: 20px;
}

We’ll address making it sticky afterward.

[Janani]

Dear Fernando,

Thank you, it looks much better now. However, the grey rectangle box does not extend to the entire length of the website, if you can see. It starts few cms away from the left. How can we rectify this?

Also, on my last query – how can we bring the list of blog titles to the center of the page, rather than the standard left side alignment? I am talking about the list of articles – they would look much better if they are in the center of the page.

[Fernando]

I see. Can you replace this code:

function getCategoryList() {
    ob_start();
    echo'<ul class="cu-cat-list">';
        wp_list_categories('orderby=name&show_count=0&title_li=');
    echo'</ul>';
    return ob_get_clean();
}

add_shortcode('mycatelist', 'getCategoryList');

with this:

function getCategoryList() {
    ob_start();
    echo'<div class="cu-cat-list-div"><ul class="cu-cat-list">';
        wp_list_categories('orderby=name&show_count=0&title_li=');
    echo'</ul></div>';
    return ob_get_clean();
}

add_shortcode('mycatelist', 'getCategoryList');

Then, replace this code:

ul.cu-cat-list {
    background-color: #F0F0F0;
    justify-content: center;
    font-size: 20px;
}

with this:

ul.cu-cat-list {
    background-color: #F0F0F0;
    justify-content: center;
    font-size: 20px;
    margin: 0;
}

As for your second query, are you wanting it to center just on the Blog page? If so, try adding this CSS:

.blog article {
    text-align: center;
}

Otherwise, if you want them centered on archive pages as well, use this instead:

:is(.blog, .archive) article {
    text-align: center;
}

[Author]

Posts