How to Create a GeneratePress & GenerateBlocks Starter Site and Child Theme
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In this video I walk you through the process of setting up a Starter Site and Child Theme perfect for GeneratePress and GenerateBlocks.
------------------------------------------------
💻 Visit Our Website: theadmin.bar/yt-tab
🗨 Join Our Free Community: theadmin.bar/yt-community
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/yt-tfc
🔁 Sell More Care Plans: theadmin.bar/yt-wom
🧮 Use My Website Price Calculator: theadmin.bar/yt-calculator
📜 Get My Proposal Template: theadmin.bar/yt-proposal
☑️ Get More Done with My Checklists: theadmin.bar/yt-checklists
🔴 Live Event Schedule: theadmin.bar/yt-events
🔧 The Tools I Use: theadmin.bar/yt-tools
⚡ My Agency, OGAL Web Design: theadmin.bar/yt-agency
▶ TIMESTAMPS
00:00 Introduction
00:30 Installing WordPress
01:00 General WordPress Settings
01:29 Installing Our Theme & Plugins
02:57 Setting Up Our Child Theme
05:23 Plugin & Theme Tweaks
06:20 Creating Our Style Guide Page
10:38 Setting Up GP Elements
15:47 Sample Pages
![BOWKYLION - เจ้านายคะ (work-life imbalance) [Official MV]](http://i.ytimg.com/vi/6bFj8G2pOi4/mqdefault.jpg)
![แล้วแต่เวรแต่กรรม-ครูศรีหนุ่ม [OFFICIAL MV]](http://i.ytimg.com/vi/Xide0fkAS8g/mqdefault.jpg)
When it comes to TH-cam and WordPress you provide the best value by far Kyle. Having access to your methodology is beyond any superlatives, so I will simply say thank you.
Oh wow, thank you so much for the kind words! Glad to be helpful!
I feel like I have to watch this a few more times, too much info, and feels overwhelming but I love how incredibly well structured everything is laid out for us to follow.
Thanks for taking the time!
This was very helpful. With GP being my go to theme there was still a lot for me to learn. Using the elements to setup default layouts was certainly a great tip.
The speed at which this video moves is very fast for me. I wish I could sign up for a class with you. I build websites but I use Elementor and some of my plugins are laggy and heavy, I'm looking to build sites that rank and so I need more speed. I use All in one SEO, Ahrefs and SemRush to rank my pages and they are ranking high but I can do better. I sure enjoy the content, if you do consider putting on a class I would be interested, thanks
Another awsome one! Got to get a bit more organized like that. Keep them coming.
You've earned my trust, for now! lol
I hope to have more classes as is in Woocommerce environment!
Thank you very much!
Thanks for this Kyle. Just venturing into Gutenberg with GP & GB. Looks quite promising for future sites. Thanks again.
Great stuff, much apreciated! Thank you for your work and for making useful files and links available.
Hope it helps!
Thanks for this Kyle! 👍
So helpful! Thank you for sharing!
Learning a lot and making notes from your videos. Thank you for sharing such valuable content ❤
Again great video! Will utilize a lot of this for my future projects. Thanks a lot and keep it up! :)
Glad it was helpful!
Great video. Have booked marked it for when I move some sites to GeneratePress and Blocks
Thanks! Great video for a starter site with Generate Press and Generate Blocks.
Thanks, Sandra!
Thanks for posting this.
That was very helpful. I am getting back into Wordpress site design and this will help me get up to speed.
Great, Ed! Happy to hear it's helpful!
Great video. Thanks, Kyle!
Glad you enjoyed - thanks for watching!
Nice work - learned a ton.
Glad to hear it! Thank you Aaron!
1:32 in and I've already learnt so much! This is so helpful
Glad you are getting some value! Thanks for your comment and support!
That was very helpful video for me, Thank you so much for sharing
Thanks for watching!
too late in the game... just was trying out the tutorial, says that the child theme css and php is in the description. I cannot find it! maybe I am missing something!
wow man .. this is awsome :)
Glad you enjoyed!
Great video! Thanks for sharing your insight! Global styles, global colors is new to me. I’m going to start implementing this into my workflow! One question I have is how you set up your child themes function file, if you use an includes folder that then pulls in other function files for organization.
This is how I’ve always set my structure up but just noticed via Wp-config, debug, true that I’m enqueue the scripts in the wrong order apparently. Admin scripts need to get enqueue first. Everything works, it’s just throws an error which isn’t good obviously. I’ve got some “turn admin dashboard widgets off” functions. Maybe that’s causing the error. I’m not sure.
Incredibly useful video 🙃
Just one question: in the end of this process how do you pack things up for a new fresh install? Do you use a plugin like Duplicator or directly the Cloudways panel?
Thanks in advance for your great job done here.
Thanks Michele! I just duplicate the application in Cloudways :)
Thanks for this. At the 8:30 point you're shown to have Categories available for your Pages - what plugin are you using to make that appear?
You can add taxonomies or custom taxonomies to pages or any other post types via PHP. In "Code Snippets" plugin just add this snippet for creating a custom category for pages (will be a different one from those used in regular posts):
add_action( 'init', 'pages_tax' );
function pages_tax() {
register_taxonomy(
'things',
'page',
array(
'label' => __( 'PageCategory' ),
'rewrite' => array( 'slug' => 'pagecat' ),
'hierarchical' => true,
)
);
}
Thanks to Roger Marquez for the encouragement. At least I am not alone. This was too quick for me But at least in TH-cam there is a possibility to slow the video so I can barely keep up, and stop it when I am lost, and repeat when I am mightily confused.
Thanks for the tips Really helpful.
Très bon méthodologie 👌👌👌
🙌
Glad I came across your videos. I've been learning quite a lot from you. You mentioned not allowing search engines to index the site while you were adding in all the plug ins. That seems counter-intuitive since you ultimately want it listed in search engines, or am i not understanding what the search engine indexing does?
you helped a lot but i am a beginner and i need more dump proof stuff :D thanks a lot to
Thank you so much for the great tutorial! I was freaking out until I watch your video.
I’m curious how you incorporate global responsive spacing like one would see in UI framework like Bootstrap or Ant Design? 🙏🏻🙏🏻
I build some of that into my Global Styles in GenerateBlocks (I have a video on that). And the theme has some settings as well. But it's not nearly as comprehensive as something like Bootstrap (which would be overkill for most of my projects anyway)
A bit too fast, but very good and interesting. Thank you.
Thanks for the feedback!
Thank you so much for providing this excellent and helpful tutorial 🙏 Please allow me to add a note on the Site-Wrapper-Elements:
I tried to recreate the wrapper on a fresh GP-site, where I use a “Merged Header” Header-Element, so that all hero-containers will merge with the header. Obviously, this will “corrupt” the Site-Wrapper. Any idea about how to solve this?
Also, when adding a Top-Bar Block-Element (e.g. to display location & phone at the very top of the screen) and set it to generate_before_header (just like the Open-Site-Wrapper-Hook-Element), it won't be included. I gave it a higher priority already, but no effect. Do you know, how to solve this?
Try changing the opening hook element to wp_body_open and see if that does the trick!
@@TheAdminBar I like your site wrapper element 1920 container width idea. I’ll have to try this out with your suggested hook / priority
Thanks
You're welcome!
How do you make all this reusable after the fine tuning? I was really looking forward to that part.
I just keep a copy of this site on my server. When it's time to start a new project, I just "clone" the starter site. Most hosts will let you make a copy of a site.
Kyle, this is by far the most helpful TH-cam GP/GB/Wordpress site I know of. Many thanks for your great work.
What I would be curious to learn ist what happens with you starter site when you receive a new client order, Do you upload this starter page as child theme for this new client and than develop this page from there?
Basically... I use Cloudways for hosting, and with that platform you can just "clone" an installation. So when I am starting a new project, I just find my starter site, clone it, and give it the name of the project and I'm off to the races.
This is great!!! Thank you. I will try to use this as a step by step tutorial to build a site. What I was wondering: when you are finished, is there a way to copy this so you don't heave to do this all again when you're building a new site.
Yep, that's the whole point :). I use Cloudways and you can just duplicate any application. However, you could just use something like All In One Migration do export your starter site out and import it into a new fresh install.
so... customize > layout > container can be set to 1920px and then you wouldn't need your site-wrapper hooks and css code for "standard pages" right?
No, cause then your content would go out to 1920. I want my content to be more like 1200, but the site backgrounds to never extend past 1920.
What do you use for mega menus when working with blocks in Gutenberg?
I haven't built any... yet. But I do have a project coming up, so if I find a good solution, I'll be sure to share!
I am trying to move away from Elementor and have started to use Generatepress and Generateblocks and already ran into a problem. I set a dark color for my body (page) in the themes customizer and when I view the page it looks fine. But when I go into Gutenberg the background page color is still white, this is no good as I can't visualize my design properly. What am I missing, is there something I can do to correct it? *update* if i select the body to be black and the content to be black then when i edit the page in gutenberg the background is black... but this is not what I want as I want the content to have a background of white... it's like the body color and content color are not separate elements.... is this is a bug in gutenberg or generatepress or is this the way it's always been?
Hummm I'm not sure! I would suggest reaching out to GP support and see what they say!
I found you weren't changing these lines "Theme URL and Template" when you opened the theme file (CSS) on Visualcode, but changing other lines. Is it something we shouldn't do or we can do?
You want to leave the "template" alone. The child theme relies on the parent theme, and this "template" is the connection between the two.
Video unavailable
Mike Oliver's Fluent Forms customizations: This video has been removed by the uploader - Is there another link>?
Ah that's a bummer. I know Mike put a video like this in his private community (theadminbar.com/collective) , so I'm guessing he took the public one down. Sorry about that!
Thank you so much for this tutorial. Nice to see you wear a puma shirt and not puma pants😂. Sorry, a few beers deep into building my new site.
😂. I miss that Puma hoodie. It was a good one!
How do you get it so when you type .wi1 in the editor it inserts some random text? I’d like that feature without having to copy a paragraph or two from some Lorem Ipsum website.
Text Expander
@@TheAdminBar I’ve had a search for Text Expander in the plugins section and tue only one shown with that name is 6 years old. After installing and activating it gives the following error: Warning: Use of undefined constant WPTextExpander_Settings - assumed 'WPTextExpander_Settings' (this will throw an Error in a future version of PHP).
What with the above I assume this is not the one you are using.
Would you mind posting a link to the plugin you use?
Failing this, I might have to set up a quick short code script.
One more question regarding the site-wrapper (as a few updates of GP&GB got released since the release of this video) ... Wouldn't it nowadays be easier to simply limit the body-width by adding this css to the child-theme? ->
body {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
background-color: var(--contrast);
}
instead of defining a site-wrapper-class?
Ummm I don't believe so. I like having the extra wrapper so I can style both (like have a different background color "outside" of the site). But you may be right... I'd have to test!
@TheAdminBar : I have tested this on a vanilla install on tastewp, and actually you don't even need to define the gb-colour via the above CSS. This can be defined via Customizer > Colors > Body and will then apply to the area outside the wrapper, whereas the Content-color can be set differently via Customizer > Color > Content. 🤗
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 🙏
This sounds like something your SEO plugin is adding. With a lot of SEO plugins you can set a keyword (by just typing it in) and it uses its algorithm to see how well your page is optimized for that keyword.
@@TheAdminBar that makes sense to me. Thank you so much for the insight
FYi - the link to Mike Oliver's Fluent Forms customization isn't working. Man I wish he'd have left his course open until he actually launches his new site.
His community is open :) Has been for a couple months now :)
Oh didn’t realize that - thx
would this css and php also work for an elementor starter site too?
Perhaps, but I'm really not sure.
@@TheAdminBar thanks Kyle, it seems to :-) not quite there yet with GB & GP
Why is a child theme required, when there is Elements module, and also you are using Code Snippets? I thought those pretty much removes the necessity of a child theme.
I use one for one main reason -- so I can enqueue my CSS styles into the back end editor.
Where is the resulting site?
🤯
Curious why you "discourage search engines from indexing site". Wouldn't this ask Google to not index your site and therefore you get no search engine traffic?
I don't want it to index my starter template.
@@TheAdminBar ah makes sense
Hi, i was wondering why CHILD THEME is important? and why we have to work on that? let me know if you already have a video on that or please reply me with the answer. Love your content, it has helped a lot through out my web design journey..
Hey, Syed! A child theme isn't completely necessary. You can use plugins (like CodeSnippets) to add CSS or PHP that won't be affected when your theme updates. So don't feel like you **have to** use a child theme - you don't!
I typically do, however, because I have a lot of little PHP and CSS tweaks I want on every project. By putting these into my child theme, they are all already there for me when I get started.
Plus, for example, if you add CSS to the customizer, you won't see those tweaks in the editor. But if you put them in your child theme, there's a small PHP script you can add to enqueue the child theme CSS file into the editor. This just makes the backend and front end more consistent (though still not 100%).
I Hope that helps!
@@TheAdminBar thank you so much, yes that helped.
Is Bot Protection a really good plugin?
No clue, really. Cloudways installs it by default and it seems like something I shouldn't uninstall 🤣
I always wonder this too. Cloudways (I just migrated) shoves it in all your Wp installs. If reluctant as well to delete lol @theadminbar
thanks for sharing! keep looking for ways to build using GP and GB both in free versions, it seems not possible = )
Are you building just for yourself? Or for clients?
For myself
code snippets is gone from WP
From what I understand it will be back.
I wish there was a video on how to design a basic WP site with Generate Press. I watched every single video on YT on GP and none are good. There are always custom CSS and PHP and premium plugins. Always. Unless you are a CSS master, Generate Press is not for you.
Just depends on how custom you want to get. You can do plenty with both the free versions of GP and GB with no code... but if you want to do more, knowing CSS is very handy! But maybe GB isn't the right solution for you.
It's so fast that I'm crazy
definitely went through things way too fast need to slow down a bit
Kyle! I love your videos, including this one. The only problem I have with this video is the speed of the video. Not your speech though. However, moving around creating the style guide page was too fast for me. I tried rewinding several time to see which and where you were making the changes in a specific block. Paul Simon once said 'Slow down, you're going too fast' - LOL
I'm non-tech.Why should i have a child theme?
You absolutely don't _have to_ have one. If you get into doing a lot of custom code, it can be handy (but even then you can use a code snippets plugin to do all that and not use a child theme). What I like about it is that I'm using the same child theme on all of my websites so all the tweaks I want are on all my sites.
Just bricked my page
lol
This video tutorial is too fast for a beginner!