- This topic has 12 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
I have imported a site from your site library which has the styling for the latest articles on blog category pages.
How can I use the same styling to show the latest 6 blogs but on my homepage? I tried adding a new block but cant get the styling the same.
Customer Support
Hi there,
The latest blog card you are referring to is built with GenerateBlocks in a Content Template:
https://docs.generatepress.com/article/block-element-content-template/You can replicate that using a Query loop block to use it in a static page:
https://docs.generateblocks.com/article/query-loop-overview/Let me know if this helps 🙂
i still cant seem to do it, the one for all category pages is
element type: content template
tag name: article
apply to: all postsif i try to copy for homepage it doesnt work as no blog linked to homepage.
If i try and query loop i cant seem to get the same styling
Customer Support
Hi there,
create a new draft page.
in the Top Bar 3 dot menu, select the Code Editor.
Paste this code into the editor:<!-- wp:generateblocks/query-loop {"uniqueId":"d5cb2d92","query":{"post_type":"post","per_page":10}} --> <!-- wp:generateblocks/grid {"uniqueId":"8c2a0adc","columns":1,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} --> <!-- wp:generateblocks/container {"uniqueId":"48cdce2d","isGrid":true,"isQueryLoopItem":true,"gridId":"8c2a0adc","width":33.33,"paddingTop":"16","paddingRight":"32","paddingBottom":"24","paddingLeft":"32","isDynamic":true,"blockVersion":2,"lock":{"remove":true,"move":true}} --> <!-- wp:generateblocks/button-container {"uniqueId":"28c2612e","marginBottom":"6","isDynamic":true,"blockVersion":2} --> <!-- wp:generateblocks/button {"uniqueId":"ad535997","hasUrl":false,"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","borderColor":"","borderColorHover":"","fontSize":12,"letterSpacing":0.1,"marginRight":"6","paddingTop":"4","paddingRight":"10","paddingBottom":"4","paddingLeft":"10","blockVersion":2,"useDynamicData":true,"dynamicContentType":"terms","termTaxonomy":"category"} --> <span class="gb-button gb-button-ad535997 gb-button-text">Button</span> <!-- /wp:generateblocks/button --> <!-- /wp:generateblocks/button-container --> <!-- wp:generateblocks/image {"uniqueId":"c5a13e54","sizeSlug":"medium","width":"100%","useDynamicData":true,"dynamicContentType":"featured-image"} /--> <!-- wp:generateblocks/headline {"uniqueId":"e0c654b8","fontWeight":"700","fontSize":30,"marginTop":"16","marginBottom":"12","useDynamicData":true,"dynamicContentType":"post-title"} --> <h2 class="gb-headline gb-headline-e0c654b8 gb-headline-text"></h2> <!-- /wp:generateblocks/headline --> <!-- wp:generateblocks/headline {"uniqueId":"63fd867e","element":"div","fontWeight":"700","fontSize":12,"textTransform":"uppercase","marginBottom":"16","useDynamicData":true,"dynamicContentType":"post-date"} --> <div class="gb-headline gb-headline-63fd867e gb-headline-text"></div> <!-- /wp:generateblocks/headline --> <!-- wp:generateblocks/headline {"uniqueId":"674b34e2","element":"p","fontSize":16,"useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":25} --> <p class="gb-headline gb-headline-674b34e2 gb-headline-text"></p> <!-- /wp:generateblocks/headline --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/grid --> <!-- /wp:generateblocks/query-loop -->Switch back to Visual Editor.
Modify the colors of the meta buttons.
And with the Query Loop selected, change its Parameters to suit your needs.
Then copy the block and add it where you need it.thanks – thats added all the styling but when i push it live there are no links on any of the articles?
link below and section is at the bottom of the page
Yeah, i thought it would be good to leave them out, so i can explain how to add them 🙂
In the Query Loop block, there is the Post Template Container.
Inside of that are the individual blocks.
If you select one of the blocks , start with the Image block.
In its sidebar settings > Dynamic Data you can see the:DATA SOURCE is set to the
Current Post
CONTENT/IMAGE SOURCE is set to theFeatured ImageYou just need to set is LINK SOURCE to Single Post
You can repeat this for the Title.
For the Category term buttons you can set the link source to theTerm Archivesawesome thats worked a treat!!
sorry last questions!
how can i change it so it doesnt have pagination? this is on normal category pages like cycling or swimming
So should it only show the latest 10 posts in an archive ?
It would be to have 20 or 30+ posts showing
You will need to ad the following PHP Snippets to your site:
// remove pagination from category archvives add_action('wp',function(){ if ( is_category() ) { remove_action( 'generate_after_loop', 'generate_do_post_navigation' ); } }); // set posts_per_page for category archives add_filter('pre_get_posts', 'category_number_of_posts'); function category_number_of_posts($query){ if (is_paged() && $query->is_category) { $query->set('posts_per_page', -1); } return $query; }This doc explains how to add PHP:
https://docs.generatepress.com/article/adding-php/
TLDR:
Are you using a Child Theme?
If Yes, then the PHP goes in the Child Theme > functions.php
If No, then install the Code Snippets plugin ( link in the above doc ) and Add New Snippet to add the PHPgreat ive updated it all and works fine on desktop but on mobile all 3 columns are squashed on the page
its as the bottom of the homepage
Edit the Query Loop, inside it there is the Post Template container block. Select that.
In its Layout you can set its width, it will be 33%. Switch to Mobile view and change the value to100%
- You must be logged in to reply to this topic.
