[Resolved] Is GeneratePress possibly able to create this style?

[William]

Hi there,

After such great support, I am looking to possibly push another site of mine to GP Pro.

The theme I want it to look like is here for a post page and here for a category page. Not the background for category pages is a gradient, that is a different color randomly assigned for each category (here is another example with a randomly generated different color).

I just wanted to get your impressions of how easy and possible it would be to replicate this with GP, such as the primary navigation menu (both mobile and desktop), category pages, the post featured image background with the category link style (of a letter bigger separated from the category name), excerpt shown, and then if the featured image is not selected, to have pages such as this as the default.

Kind regards,

Will

[Elvin]

Hi,

Let’s break things down in details of how you can go about this.

Let’s go with the general layout first:

The social links on the Header/Nav bar: https://share.getcloudapp.com/6quxkR0x
– You can use the generate_menu_bar_items hook to place the social media icons and the call-to-action button.
https://docs.generatepress.com/article/generate_menu_bar_items/
– Styling and/or layout can be done in either Appearance > Customize or custom CSS.

The Page header/hero: https://share.getcloudapp.com/Z4uqJvPn
– This can easily be replicated with GP Premium’s Header Element.

The Sticky Sidebar:
– We can apply the same position:sticky; to GP’s sidebar as well via CSS.

The Footer:
– You can place your details on the footer widget areas available on the theme. As for layout to fit your preference, simply pick the appropriate spot on the widget areas to match how the reference site looks. We can also style this w/ custom CSS if the customizer settings isn’t sufficient enough for you.

As for the specific pages:

For the archive/blog pages –
We can set the number of columns through Appearance > Customize > Layout > Blog and check “display posts in columns”.

As for the hover effect on blog posts, you can do something like this via CSS:

article.post .inside-article{
position: relative;
    border: 1px solid #e9ecef;
    padding: 40px;
    margin-top: -1px;
    margin-left: -1px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    background: #fff;
}
article.post .inside-article:hover{
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.075);
    z-index: 1;
}
.generate-columns {
    margin-bottom: 0px;
    padding-left: 0px;
}

As for the single posts page:

– You can use the WPS TOC plugin and Easy Social Share Buttons on GP much like how you use it on the reference site as well.

– the comment area can be replicated with styling and some PHP snippets. I believe the same author info layout has been asked here before but I can’t exactly remember when. I advise you open a topic for it.

– archive can be added through PHP snippets on hooks as well.

Apologies for the lengthy reply. Feel free to ask if you have any further questions. 🙂

[William]

Sorry for the late reply and huge thanks for getting this started! I genuinely love Generate Press and support is second to none – it’s many the reason why I have told people ‘why use X and Y theme when you can do it all with Generate Press, and it’s super lightweight!’

So I’ve given your points a start on a cloned site for me: https://wordpress-425633-1630880.cloudwaysapps.com/

I do not see an option for ‘generate_menu_bar_items’ and unsure how to add social media buttons if I did.

As well as this, the menu is not totally the same, both desktop and mobile, as what I was after here. Are you able to advise such changes that need to be made to achieve this?

It’s also worth mentioning that the featured image post element, such as here, should only occur if a featured image has been chosen. If not, it should default to something such as this. Is this possible?

[William]

I also think it would be really nice to have a search bar in the header too, either in full of like this https://expertlytheme.com/expertly/

[Leo]

Are you able to start a separate topic for each of your questions now Elvin has given you some pointers to kick start things?

It will be much easier for us to track each issue.

Thanks!

[William]

sure thing thanks!

[Leo]

Thanks 🙂

[Author]

Posts