Designing a Custom GeneratePress Website from Scratch

Рет қаралды 14,171

3 жыл бұрын

Learn to create custom design for your WordPress website with GeneratePress theme. We'll design 2 post layouts, a styled blog archive, add author Gravatars and a lot more!
You can use this tutorial whether you have the free version of GeneratePress or have already upgraded to pro (except for the section on GeneratePress 'Elements, which is a pro feature).
Here's what you'll learn:
- how to create a menu and header
- basic layout options for GeneratePress
- how to customize the typography in GeneratePress
- Design a fluid post layout with just CSS and the customizer
- Design a boxed post layout
- Add a custom post header with featured image, post title and author byline
- Add author images (gravatar) to your byline
- How to style GeneratePress archive (blog) pages
- How to design and add widgets to the GeneratePress footer
👉 Tools & Plugins I Use
-----------------------------------------------
• Hosting: Cloudways buildthatwebsite.com/cloudways
• Theme: Generatepress - buildthatwebsite.com/generate...
• Page Builder: Elementor Pro - buildthatwebsite.com/elementor
• Site speed & Optimization: WPRocket - buildthatwebsite.com/wprocket
▶▶ GeneratePress Code Snippets ◀◀
Author Byline w/ Gravatar - docs.generatepress.com/articl...
Author gravatar shortcode (Elements header) - docs.generatepress.com/articl...

Пікірлер: 106

@dmytroshevchenko9468 2 жыл бұрын

Awesome. GP should pay you for this coolest GP' tutorial ever seen.

@MikeSmith183 2 жыл бұрын

Thank You SO MUCH FOR THIS!!!

@alessandrorodrigues2060 2 жыл бұрын

I'm glad I found your channel, dude. You're very good at explaining these steps, and I say so being quite new to CSS and GeneratePress. Subscribed! Looking forward to more videos.

@BuildThatWebsite 2 жыл бұрын

Do you have a suggestion for a future video on Generatepress or anything else?

@alessandrorodrigues2060 2 жыл бұрын

@@BuildThatWebsite I'm very interested in seeing more videos like this one, where you apply your knowledge step-by-step. As someone who is used to pagebuilders and learning how to really develop/code, that sort of content is really helpful to me, and from what I can tell by the comments, to other people too.

@paulchiao8191 2 жыл бұрын

I am new to CSS and GP too, I am wondering how long time I need to master CSS and GP

@BuildThatWebsite 2 жыл бұрын

You can learn the basics of CSS in an afternoon. Start with the box model, spacing as well as block vs inline-block vs inline elements. After that you can focus on learning the specific properties that are relevant to what you're trying to build. I also suggest learning flexbox early on. It makes alignment and responsive design so much easier. Check out codeacademy for some free interactive intro courses, and then you can move on to youtube tutorials or a book. Then start practicing. You learn by doing, not by reading/watching. As for GeneratePress, it's honestly not the greatest theme for non-developers. I've had to learn PHP just make some customizations that are easy on other themes. I recommend checking out blocksy if you're looking for a beginner-friendly theme. The free version is pretty amazing and the pro version adds things like hooks and a header builder like GeneratePress premium offers.

@monduli Жыл бұрын

Great video -so well explained. You’ve got a new subscriber!

@BuildThatWebsite Жыл бұрын

Welcome! Should be some new Generatepress videos coming out in January

@itspraveensharma 3 жыл бұрын

A million Thanks brother!!! Hope you keep posting more such awesome videos about generatepress......🤞🤞

@BuildThatWebsite 3 жыл бұрын

I definitely will. I plan to do detailed videos on the pro features like hooks and headers soon. What kind of sites are you building with GeneratePress?

@itspraveensharma 3 жыл бұрын

@@BuildThatWebsite I'm building tour and travel websites where I need to show multiple itineraries and tables. Creative package blurbs etc. That kind of stuff....

@BuildThatWebsite 3 жыл бұрын

If you have some decent HTML and CSS skills, you should check out Lazyblocks or Genesis Custom Blocks, which will allow you to easily create your own custom coded Gutenberg Blocks (It builds the PHP and Javascript for you automatically). This will help you design content blocks that can be reused (same styling but different content) on each post. If you're still a beginner in CSS, Elementor Pro can help you do the same thing, but you can build your templates visually and then re-use them. I'll be dropping a new video this weekend, showing how to build custom Elementor templates that include dynamic custom fields. Also, check out my TablePress video if you want a good tutorial on using the best Free table plugin for WordPress: kzfaq.info/get/bejne/a7iPY5eGrrPPeoE.html

@itspraveensharma 3 жыл бұрын

@@BuildThatWebsite Ok, I'll check those out.

@tim78723 3 жыл бұрын

You know CSS really is quite simple, the configuration is not that difficult. I have taken countless classes (I didn't say I finished them) but this quick hour made more sense to me than anything I've ever seen. I get it! I have had GeneratePress for three years now, and this actually makes so much sense to me. It's awesome. Thanks so very much. Great lesson. You got a new subscriber ! Keep churning these out.

@paulchiao8191 2 жыл бұрын

is CSS hard to learn? how long time do you think a common person need to spend

@Quizolo 2 жыл бұрын

Thanks, you helped me a lot

@BuildThatWebsite 2 жыл бұрын

You're welcome!

@jeffbarnhart6441 Жыл бұрын

great video

@1dluep 2 жыл бұрын

makes it look easy

@miguelwillbanks3344 2 жыл бұрын

This is really good. Thanks for the hard work.

@BuildThatWebsite 2 жыл бұрын

Glad you found it helpful! What video should I make next on GeneratePress. Complete site build using the pro version?

@miguelwillbanks3344 2 жыл бұрын

@@BuildThatWebsite maybe you could show how to edit the HTML of the theme itself? I've been trying to customize the "entry-date" of a post with css but I need to wrap it around spans before I can target it. But I haven't located the html file and idk where it is. Any tips?

@BuildThatWebsite 2 жыл бұрын

@@miguelwillbanks3344 The good news is that you can definitely target the .entry-date without a span. It already has an .entry-date class name, which is all you need. If you're trying to target it to specific pages or categories, you can use the body classes or category classes in the parent containers to narrow your targeting. GeneratePress compartmentalizes every part of the content display, and uses a hook system to determine what to show and where. It makes the theme really flexible, but also incredibly hard to modify for non-developers. If you have the premium version, you can just ask for a php snippet in the forums and the team will literally write code for you. If you're using free, just use google to search "generatepress filter entry-date" or something along those lines. Most questions have already been asked an answered in their forums. Also (with pro) you can use the new content-template feature to modify the post meta with blocks, and you could add the span or custom class that way. But there's no HTML file you can modify, and the .entry-date isn't even part of a PHP template. It's generated by a custom function, and can only be modified with a filter, which definitely requires PHP skills or a snippet from the GP team.

@BuildThatWebsite 2 жыл бұрын

I will be diving into the 'content templates' and new theme builder functions in some upcoming videos. I was also thinking about doing one on customizing a category template, and inserting content into your archives with the block editor.

@miguelwillbanks3344 2 жыл бұрын

@@BuildThatWebsite that would be awesome to look forward to. So when targeting the "entry-data", if I want to just target only the "year" to style it, I can do that without a span then? Thanks.

@demasmoha 3 жыл бұрын

I would love to have all the css used in this demo please . Thank you very much 😊 this was golden nuggets

@BuildThatWebsite 3 жыл бұрын

That's a good point, thanks for reminding me. I'll post it on the site and add a link to it ASAP.

@demasmoha 3 жыл бұрын

@@BuildThatWebsite I already looked at the site unfortunately, I haven't found what I needed 😔. I would like to uplift the content container as in 54:22 . Please can you provide me with css that you've used to target the inside article ?

@BuildThatWebsite 3 жыл бұрын

@@demasmoha You're right, sorry. I'll try find a place to add the code this weekend if I have some time. To raise the content container all you need is some negative margin. So for example: .inside-article { margin-top: -150px; } If you want to do it only on your posts, you would write: .single-post .inside-article { margin-top: -150px; } Adjust the exact amount of margin to make it look right for your design.

@infomantryplus6235 2 жыл бұрын

That was awesome I enjoyed allot with learning I want you to make a vedio on How to setup amaizing home page and hero section using elements Without css or with lil bit css both

@BuildThatWebsite 2 жыл бұрын

Thanks for the suggestion. I definitely will be doing videos on how to build a homepage using both page builders and the Gutenberg block editor. A tutorial on Generatepress elements is also planned, but it might end up being part of a complete site-build tutorial.

@roppor2194 3 жыл бұрын

Please continue this video, complete the sidebar, and, if possible, set up the sale of one digital product, one physical product. Very useful tutorial, thank you.

@BuildThatWebsite 3 жыл бұрын

Hopefully I can release an e-commerce tutorial this summer. As for the sidebar, I did a full video on creating useful sidebars: kzfaq.info/get/bejne/j9OkebR_mNabmY0.html

@roppor2194 3 жыл бұрын

@@BuildThatWebsite Thanks Bro 👍

@roppor2194 3 жыл бұрын

I studied the video, you have perfectly designed the output of the posts as a whole. I would like to know your opinion, if this is not only a news site, but also the sale of goods, how would you design the home page, and the store page, one digital, and one real product ...? I would like to set up ticket sales for my city, and allow others to post their products by subscription. How would you do it? Generatepress I like it, can you share your experience?

@roppor2194 3 жыл бұрын

Maybe there will be a continuation of the video about working with Generatepress? You explain it very clearly, despite the fact that I do not know English the best way

@BuildThatWebsite 3 жыл бұрын

@@roppor2194 I will definitely be doing more videos on working with GeneratePress. I want to show how to add breadcrumbs and an author box for example. I'll also get more into adding functionality and design with page builders (like Elementor) or Gutenberg blocks.

@ziggsstar 3 жыл бұрын

Thank you very much. Fantastic video. Lots of very neat customisation tips. Request: Could you do some videos on GenerateBlocks (free version) in tandem with GeneratePress (I have the premium version) , how to style the sidebar with CSS, create a custom sidebar with elements and create a custom archive page, please? I've just subbed, hopefully you will grow your channel.

@BuildThatWebsite 3 жыл бұрын

This are great suggestions and they're in the queue. Hopefully I can get to some of these in the next month or two. Can you clarify what you want to learn about custom archives? I'm assuming you mean more than styling, but actually restructuring the archive and adding custom content? I'm actually doing this now on one of my sites using Elementor (though there is a trick you can use to override the archive pages with standard WordPress page, no coding required.

@BuildThatWebsite 3 жыл бұрын

The sidebar video is up if you're interested. kzfaq.info/get/bejne/j9OkebR_mNabmY0.html

@ziggsstar 3 жыл бұрын

@@BuildThatWebsite Thanks for the reply. On the WP site I'm working on (local darts league in the UK) the archive in the side bar lists every month since 2012 until the present, and it's getting very, very long. I know there is a dropdown option - but I'd like to know how to move the archive to a dedicated page. Yes, restructuring the page, but knowing how to style the page would be a bonus and the less coding the better. I use GP Premium and GP Blocks. Really appreciate it - and I don't expect you to be my private tutor LOL.

@ziggsstar 3 жыл бұрын

@@BuildThatWebsite Yep, got a notification today. I will have a watch later today - many thanks in advance.

@BuildThatWebsite 3 жыл бұрын

@@ziggsstar You could use something like WPBeginner's compact archives plugin to quickly build a simple accessible archive. This is especially helpful if people frequently navigate by month (like league results) www.wpbeginner.com/blueprint/compact-archives/ I do cover some basic archive styling in my hour-long generatepress tutorial. Depending on your category structure, you may be able to override archives with pages which you could design with GP Blocks or Gutenberg. A drag and drop option is to use a theme builder like Elementor Pro or Beaver Themer for custom archives.

@ThomasGUILLAUXprofile 2 жыл бұрын

Hi Matt! Great tutorial again! One question though: to what extent does all this additional CSS have an impact on performance (page speed)? Is it not recommended to put as much as possible in the styles.css ? Thanks

@BuildThatWebsite 2 жыл бұрын

Two thoughts: 1) compared to a plugin you might install to customize your site, this amount of css is insignificant. It will add less than 5ms of download time. 2) it doesn't really matter where you put the css. Whether you put in style.css, customizer, or a 3rd-party plugin it all gets enqueued the same way. Load times should be basically identical. But yeah, if it's going to be permanent css go ahead and move it to style.css

@ThomasGUILLAUXprofile 2 жыл бұрын

@@BuildThatWebsite Many thanks !!

@Jort569 Жыл бұрын

Love the video! Is there more coming?

@BuildThatWebsite Жыл бұрын

The channel has been on pause but coming back with Generatepress and Gutenberg content in may

@Jort569 Жыл бұрын

@@BuildThatWebsite Thanks for your reaction!

@cabpil0t556 2 жыл бұрын

More generatepress+generateblocks tutorial pleaseeeeeeee....thank you

@BuildThatWebsite 2 жыл бұрын

It's definitely on the list. I'm trying to get a complete site build tutorial with GeneratePress Pro done in October

@Klaus53123 2 жыл бұрын

Hi Matt, another great tutorial 👍. Many thanks 🙏 . One issue: I struggle hard to find the GeneratePress Child Theme. You mention in the video that you put the link into the description. Can’t find it there. Also I can’t find anything like „GeneratePress Child“ in the Wordpress Plugin oder Theme download area. Can you help me out with that? BTW: I have GeneratePress Pro.

@BuildThatWebsite 2 жыл бұрын

Here's the blank generatepress child theme: generatepress.com/api/themes/generatepress_child.zip It has zero customization. All it does is hold your customization changes and keep them separate from the parent theme. That way you can swap out designs simply by changing child themes. You can also save previous versions of the site as a child theme if you do a major redesign, and revert back with a single click if you want. In the future, I may try releasing a customized version using GeneratePress Premium if there's enough interest.

@groomersking240 2 жыл бұрын

I love your tutorials and have learned a lot from them .❤️ One question and sorry if it's silly. Is it necessary to use the Child Theme, if I were to use the Code Sniper plugin instead? I can add any changes to the PHP without touching the original Theme. Would it be necessary or this plugin could replace the Child Theme. Thanks in advance 🤘

@BuildThatWebsite 2 жыл бұрын

You don't NEED a child theme unless you want to edit theme template files like archive.php or create custom post templates. I like to use a child theme on every site with Generatepress because customizer settings and CSS stay with the child theme which lets me switch designs by switching child themes. But if you're just adding a bit of php, Code Sniper or Code Snippets is fine instead of a child theme.

@groomersking240 2 жыл бұрын

@@BuildThatWebsite Thanks a lot! It was not clear if it was necessary or not. But i got it.👍

@groomersking240 2 жыл бұрын

@@BuildThatWebsite Thanks for Reply me. Maybe you seem silly, but today I bought a plugin called Yello Pencil and life was solved in relation to the part of not knowing CCS at the time I could do everything that had sounded and I did not have to use Elementor since everything is pure CCS.

@ankitpanchal3245 Жыл бұрын

Can you please update the CSS code somewhere. Its really hard to follow up like this. Thanks for the awesome tutorial.

@iUmarFarooqi 3 жыл бұрын

Thanks for the awesome video! Is there a second part to this tutorial?

@BuildThatWebsite 3 жыл бұрын

My plan is to do a complete build from scratch using Generatepress to build a website. Maybe a blog, or a small business site. Is there anything specific you'd like me to cover?

@iUmarFarooqi 3 жыл бұрын

Maybe an Amazon Affiliate site? 😅 You could re-design one of my websites if that's alright with you. I'm terrible at web design and would like my site to look more professional. In future, I could use that template over and over again by just tweaking the colors alone, leaving the design as is.

@iUmarFarooqi 3 жыл бұрын

But if you want to do it from scratch, please share the template as well so those who have GeneratePress premium can plug in the template. You could also charge for the template if you want. Those who want free, they can follow that tutorial you'll be doing.

@iUmarFarooqi 3 жыл бұрын

A blog would probably be more suitable as not many people design their own business websites. But many bloggers do design their own blogs.

@idyetymbuk6625 2 жыл бұрын

@@BuildThatWebsite Glad you mention small business site. I will be more interested in building an ecommerce site with GP.

@dogvaly3877 3 жыл бұрын

First of all thanks a lot🥰 How to creat pagination (previous 1 2 3>>next) and how to creat sticky header in gp premium & Gutenberg plz answer . Thank You

@BuildThatWebsite 3 жыл бұрын

If you're looking to split posts into multiple pages, try this guide: www.wpbeginner.com/wp-tutorials/how-to-split-wordpress-posts-into-multiple-pages/ As far as sticky headers, I already did a video on this using Generatepress. There are 3 methods, including the built-in option for Generatepress premium. kzfaq.info/get/bejne/qcCAi5Sjr8mllY0.html

@dogvaly3877 3 жыл бұрын

@@BuildThatWebsite sir , thanks a lot🥰🥰🥰🥰🥰🥰🥰🥰❤️❤️❤️❤️❤️❤️❤️❤️❤️

@dogvaly3877 3 жыл бұрын

Sir, How to creat video background homepage without plugin!?

@jasonyam6285 2 жыл бұрын

Hi dude, this is absolutely a valuable lesson. Can I have the css code, please?

@BuildThatWebsite 2 жыл бұрын

I'm currently building a spot on my website to post code from tutorials. It should be up by the end of next week hopefully.

@dinorossi6611 2 жыл бұрын

I need to build my next project using GP. Magazine style theme. I do not know CSS. Not sure what to do.

@BuildThatWebsite 2 жыл бұрын

Is the client requesting GP?

@BuildThatWebsite 2 жыл бұрын

If you must use GeneratePress, you can still achieve a magazine layout by using plugins. PostX Pro is a great option: www.wpxpo.com/postx/?ref=mmilliken (affiliate link) It's well-coded, not a page builder, and has tons of included templates, card designs and pre-built layouts.

@iUmarFarooqi 3 жыл бұрын

Can you please tell me how can I target only posts that have a featured image for this styling? Here's what my theme says about such posts: class="post-1619 post type-post status-publish format-standard has-post-thumbnail hentry category-helmets no-featured-image-padding"

@BuildThatWebsite 3 жыл бұрын

Put the body classes .post.has-post-thumbnail at the start of your css rule. For example: post.has-post-thumbnail .entry-content h2 { font-size: 35px: }

@iUmarFarooqi 3 жыл бұрын

Thanks, It worked on parts where it had .entry-content or .entry-title in the classes. But sadly this code doesn't allow me to make this exception. .single-post article:before { content: ""; width: 100%; height: 600px; display: block; position: absolute; top: 0; left: 0; background-color: #19284D; z-index: -1; max-height: 80vw; }

@iUmarFarooqi 3 жыл бұрын

I wanna hide this block on the posts without a featured image.

@iUmarFarooqi 3 жыл бұрын

Oops! 😅 I have no idea about CSS so that's why I'm facing these issues. Thanks again, it's now working as needed. I rewatched the tutorial and it's now fixed, along with the code you gave me.

@ucantbevan1 2 жыл бұрын

How do you get that box to pop up at 27:08? Mine doesn't seem to be there.

@BuildThatWebsite 2 жыл бұрын

In Chrome you just click the icon that appears next to your box-shadow rule. If you're using Firefox I don't think there's a popup for adjusting the offset, blur & spread. It only lets you adjust the colors.

@ucantbevan1 2 жыл бұрын

@@BuildThatWebsite Makes sense as I was using Firefox. Will edit the site on Chrome instead, thanks!

@HaifengZhu-pn3uq 10 ай бұрын

Does GeneratePress have built-in Cookie Consent fuction?

@BuildThatWebsite 10 ай бұрын

GP doesn't set any user cookies, so no there is no consent feature.

@FirebrandVOCALS Жыл бұрын

Can GeneratePress be edited with Elementor? Cheers!

@BuildThatWebsite Жыл бұрын

Sure, GeneratePress is a great choice to combine with Elementor, and I use them both together on my own site. There are a couple ways to combine them. I don't use the Elementor Pro theme builder very often, instead I prefer to let GeneratePress handle the structure of the site and will inject elementor templates into GeneratePress hooks when needed. For example, my 'video' page template is built using Elementor Pro. It pulls data from custom fields to generate the article. Example: www.buildthatwebsite.com/video/top-products-hero-elementor

@BuildThatWebsite Жыл бұрын

It looks like you're using Blocksy on your site, which has many of the same features as GeneratePress, especially when it comes to theme hooks (requires Blocksy Pro). Site redesigns are a pain, so I wouldn't switch themes unless you really need to. And Blocksy is much easier to customize than GeneratePress, since it has way more styling controls and pre-built templates.

@androidphone6972 Жыл бұрын

In the dashboard of Wordpress “using generatepress theme”, under seo it shows as - keyword not set. Just wondering what is this & how to fix it. Thanks in advance 🙏

@BuildThatWebsite Жыл бұрын

That's probably from your seo plugin like yoast, rankmath, AIO SEO, etc

@androidphone6972 Жыл бұрын

@@BuildThatWebsite oh yes I have rank math, thank you. But Is this something to be concerned about? I’m including keywords in my blog posts. Thanks again, I hope you can advise

@infomantryplus6235 2 жыл бұрын

When i apllied changing bakground color of hero section css code it worked perfectly for desktop but not visible on mobile view.. can u guide about it.. Another i only want this rule for my home page But it shows on all post n pages if Any code for this plz share Thanks

@BuildThatWebsite 2 жыл бұрын

I'm not sure why the background color wouldn't show on mobile unless either 1) You're using a media query or 2) the featured image is covering the background color. If you only want a CSS rule to apply to the homepage, you can use the .home class before the selectors when writing your rule. .home .your-selector .another-class { background-color: red; } On each page, WordPress adds different body classes to the BODY element of the HTML. You can use these to target styles to specific pages, categories, etc. I recommend checking out my Chrome Inspector video to learn how you can inspect your pages and discover these classes. kzfaq.info/get/bejne/Z5thgbt-0JbFYpc.html I think I should do a video on basic tips for styling WordPress with CSS also.

@infomantryplus6235 2 жыл бұрын

@@BuildThatWebsite Thanks allot.. Yeah you must make a vedio about it And my feuture image not covering the area its 800×450 But there is no color If there is any way like email or something i can share screen shot Or can i share ss with google drive ??

@BuildThatWebsite 2 жыл бұрын

You can use the contact form on my site to get in touch. I'd probably need to see the front end of the site to take a look, so it'd need to be live on the internet.

@infomantryplus6235 2 жыл бұрын

@@BuildThatWebsite okay thanks i will send you

@infomantryplus6235 2 жыл бұрын

@@BuildThatWebsite whats your website url so i can contact

@iUmarFarooqi 3 жыл бұрын

I can't find the child theme link?

@BuildThatWebsite 3 жыл бұрын

This is the link to the blank child theme which you can install and customize: generatepress.com/api/themes/generatepress_child.zip

@iUmarFarooqi 3 жыл бұрын

Thank you! 😊

@Dangnguyenguitar 2 жыл бұрын

that CSS is too much for a newbie like me :(

@BuildThatWebsite 2 жыл бұрын

I totally understand. I'm going to do a follow-up video for GeneratePress premium with minimal CSS. But unfortunately if you only use the free version of GP you'll need some css or a theme builder like Elementor Pro to create anything that looks custom.