possible layout?

Hi there,

you would need to create a static page and use a plugin like WP Show Posts to add multiple lists to create that kind of layout.

Hi David,

I have wp show posts pro , whats the best way to create something similar style? In terms lf designing posts with wp show posts etc

Hi Tony,

You can check the card styling from our demo page here - https://demos.wpshowposts.com/cards/

The closest one (style-wise) is "Overlay" or "Overlay 1". :)

hi Elvin,

and how do i design them in that way with exact width and length etc?

and what about the navigation and off canvas menu? is that achievable?

we can use SPLIT template from the site library as a starting point and insert the different wp show posts layouts...

and then add the off canvas menu etc.

Some of that will require custom CSS to achieve.
I would suggest getting the basic site setup, with the WPSP lists in place and the Off Canvas panel set up.
We can then take a look at what changes need to be made.

Thanks David, I’ll see what I can do.

david,

i tried to design the posts but, i'm not that good at using wp show posts to get them to look like the website i mentioned above...

any manual or step by step guide on setting wp show posts up?

use temp login to see...i'm using a staging site to try all this for now.

passwords and usernames provided below

hi gp,

use the temp login below...ignore the one above...let's work straight from the live site...thank you.

i made a couple of changes, the navigation and search and off canvas menu...i now need to add the site name on the off canvas menu, have the toggle shifted over to the left next to my site logo, and the nav items in the middle with the search icon to the right...like the example website, not much to ask is it:P

1. Site name in off canvas - you can use the generate_inside_slideout_navigation hook to add your own title or image.
You can do this using a Block Element or a Hook Element

2. Shifting the hamburger requires hooking in your own custom Toggle using a Hook Element:

<?php
$icon = '';

if ( function_exists( 'generate_get_svg_icon') ) {
	$icon = generate_get_svg_icon( 'menu-bars' );
}
?>

<span class="slideout-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> MENU</a></span>

Note the span has a hide-on-mobile class which will hide it on mobile if thats required.

The Hook you would use is the: generate_before_header_content
Make sure to check execute PHP.
Display Rules: Entire Site

Then a little CSS to hide the default toggle and position it ( may require tweaking ):

@media (min-width: 769px) {
    span.menu-bar-item.slideout-toggle {
    display: none;
    }
}
.main-navigation button.menu-toggle {
    display: none !important;
}
.inside-header > span.slideout-toggle.has-svg-icon {
    margin-right: 20px;
}

Once the basics are there we can look at the other adjustments

i'll try the above and get back to you David, thank you for taking the time...really appreciate it.

You're welcome! Let us know

hi David,

please see website now, i've done the above to best I can, but i need the hamburger menu to be before my website title...like in the apetogentleman.com website. the the navigation items to the middle and lastly the search icon on the right.

currently the hamburger menu is not active and has no link...