WordPress Twenty Twenty-Three Theme Tutorial: How to Make a Website with Full Site Editing (FSE)
Vložit
- čas přidán 4. 07. 2024
- Visually design your next website with WordPress using their full site editing feature!
In this tutorial, we'll build on the WordPress Twenty Twenty-Three theme, which is free - wordpress.org/themes/twentytw...
Download the TT3 tutorial guide below to follow along at your own pace:
websiteprofitcourse.com/go/dl...
You'll get an overview of the templates that run your entire website and how to customize them from header to footer.
You have complete control without needing advanced code knowledge by making your layout using pre-defined styles, blocks, and patterns.
If you find this video helpful, the best way to say "thanks" is to start creating right now when it's fresh in your mind!
I recommend two companies I've used for all my websites for 10+ years.
For the most AFFORDABLE method, go with HostGator...
🌎 How to Install WordPress on HostGator 👉 websiteprofitcourse.com/how-t...
✅ Start your blog now with HostGator 👉 websiteprofitcourse.com/hostg...
For advanced WordPress features built-in, go with SiteGround...
🌎 How to Install WordPress on SiteGround 👉 websiteprofitcourse.com/how-t...
✅ Start now with SiteGround 👉 websiteprofitcourse.com/sgwp
Read the blog - websiteprofitcourse.com/twent...
Free stock photos - www.pexels.com/
Here are the chapters to follow along:
Intro - 00:00
Get domain & hosting - 00:29
Activate Twenty Twenty-Three theme - 01:02
Publish photos, pages & posts - 01:23
WordPress settings - 03:00
How to edit theme templates - 04:03
Set default styles & CSS - 04:44
View all templates - 06:40
Create Front Page template - 07:09
Edit Page template - 14:50
Edit Home template (blog posts) - 17:17
Edit Archive template (categories) - 20:44
Edit Single post template - 21:43
Take action now - 23:45
Use the links below to build your side business today!
___________________________________
Start Freelancing & Make Money with Your Skills!
🧰 15 Tools to Start Your Web Design Business - websiteprofitcourse.com/dl15
❓ Web Design Client Questionnaire - websiteprofitcourse.com/dl02
⌚ FREE Time Tracker Sheet - websiteprofitcourse.com/dl05
🤝 Web Design Business Pro Community - websiteprofitcourse.com/join
___________________________________
Create Your First Website or Blog Today!
💻 FREE WordPress 101 Training - websiteprofitcourse.com/dl03
🚀 Launch Your Blog in 14 Days - websiteprofitcourse.com/14day
🌎 Best WordPress Hosting - websiteprofitcourse.com/hosting/
🎨 WordPress Drag-and-Drop Visual Builder - websiteprofitcourse.com/divi/
___________________________________
DISCLAIMER: Please note that some links are affiliate promotions. I only recommend products & services that I know and trust.
![10 Minute Full Body Daily NO EXCUSE Workout [Low Impact HIIT /No Jumping]](http://i.ytimg.com/vi/kwEx3l998Ps/mqdefault.jpg)
![10 Minute Full Body Daily NO EXCUSE Workout [Low Impact HIIT /No Jumping]](/img/tr.png)
Ladies & gents - I heard your feedback (went too fast)! Watch this slower paced, newer Twenty Twenty-Three tutorial - czcams.com/video/sjh-l6ajcZg/video.html
I've watched a few WordPress videos but found yours the easiest to understand and the pace was good for beginners to follow.
Finally a tutorial for the full site editor. Thank you.
I am a (somewhat) noob on this and I was soooo tired of all these "beguiner tutorials" that do nothing but advertise paid plugins with stuff like "wanna do this cool paralax effect? just subscribe tot his plugin silly" and this one just gave me all the info without ads, without padding the video with USELESS info it is just what you need to get going. thnx.
Wow Ray: This was literally the best thing I've ever seen regarding the TT3-Theme: Thank you for being so thorough and making it approachable for the whole WP-Community.
keep up the work! I wanna truly thank you for making this for us all. 🙏🙏🙏😊👍🏻 Plz do more such awesome videos.
Thanks, Martin! I'm enjoying the full side editor. Not quite what Divi/Elementor are, but I'm intrigued to see how they update it in the coming months/years.
This was a great tutorial. I had no idea WordPress's official theme had so many options. Thank you!
The best tutorial so far, especially for begginers. Thank you!
You have done an excellent job, I am surprised by the way you explained everything for the very gigantic idea.
You are awesome bro! Such a detailed and easy tutorial is a gift to us. Thanks.
Geezuz, mate, this is what we call A Master Class.
Very well done, thanks a bunch, I've learned a lot :)
Just published another WP Twenty Twenty-Three tutorial with less editing if you're interested! czcams.com/video/sjh-l6ajcZg/video.html
Such an awesome video. I literally have avoided Guttenberg for years now but not any more and it's because of this video!
Amazing tutor for WordPress theme TT3!
This is a great tutorial on how to tame Twenty Twenty-Three - it's like a bootstrap style reset of all the nonsense that comes out of the bag - most people don't want 600px wide content!
Wow. Clean, concise & efficient. Pretty good content here.
I'll definitly use this for my templating, I did get confuse with the new editor.
It all makes more sense now :D
Thanks a lot, cheers
Done, thanks again a lot :)
Very well explained and easy to follow. Exactly what I was looking for. Thansk a lot!
My jaw DROPPED @ 6:30 ! Why would WordPress HIDE THIS TOOL !? Thank you so much for posting
I totally agree. It should be there for developers especially - I always use it for custom CSS!
Automattic should hire you to explain the new templates when they're released. :) It amazes me how little official documentation there is. Thank you!
Thank you for this demo!!
Thanks for the info related to this them! I did have a question though, any ideas why the height of the header background color changes on this theme. depending on the length of the content? If I make a small page (minimal content) the header bar doesn't even clear my header image. But on most pages it does. Not sure if that's something I can adjust?
Thanks for this!
Ray this is an excellent video showing how you customized the WordPress 2023 template. Others have commented on how quickly you go over the procedures. As one new to WordPress, what I decided to do is watch the video to the end, then watch segments of the video to review specific elements in the tutorial then implement them in my first test web site as a learning exercise which I am building locally on my PC using Apace and MySQL through the XAMPP Control Panel . There were a couple of pages that you created "off camera" that would have been great to include.
Ralph - I took that feedback and made a second tutorial that's about 2x long with less edits/cuts - czcams.com/video/sjh-l6ajcZg/video.html - check it out, along with my other videos because I have lots of WP tutorials where I go deeper on specific topics (i.e. the database, web server, code, admin tour, etc). FYI, I also began with XAMPP years ago! Cool to know it's still doing the job. Nowadays I build online in a temp or staging area.
@@RayDelVecchio Good morning Ray. Even as a senior, I was able to build my test web site going through the various steps in your tutorial. New to WordPress as an older student, I found that you have to be patient with yourself and do the learning in chunks. I did find it tricky to move a block within another block until I noticed that the blue line shortened (a feature of the WP editor). The other bit I had a challenge with is copying the Emojis into the paragraph blocks until I discovered that on Windows 10, if you hit the Windows key, then the comma key or semi colon key you bring up an selection of Emojis that you can paste into your paragraph. These Emojis did look different then the ones in the video. All in all, a very comprehensive tutorial covering lots of WP editing features. I will check out your second tutorial.
Thank you Ray for sharing this! I enjoy that you showed both the good and bad sides of this new template and editor.
Noticed that at the end of the video you mentioned Divi. Would you recommend that over TT3 theme? It would like to understand the differences and limitations between each one of them.
Yes, I chose Divi to use on my client and personal websites prior to full site editing being released. Divi is more advanced right now. They give you access to more customization options (a.k.a. CSS settings in the visual builder) so you can produce a better design, in my opinion. Not to mention that the full site editor is still listed as beta mode. I think it'll take at least a few years until that has the same capability as Divi.
However, I chose the WordPress free theme on a couple smaller, minimal client websites to test it out.
Ultimately the choice comes down to how much control over the design you want. If you're going for a really specific look, I'd go with Divi. Otherwise, TT3 and other block themes are a good option. From there, you may need to use CSS or the functions.php file to customize further when you reach the limits of the current full site editor!
I have a question Bro, I created custom fields in wordpress posts (standard wordpress functionality) - size, age, color. How to customize the appearance and order of the fields? How to display these fields in a new (standard) post, how to add such a post from the frontend (button add new post, for the site manager.)
Thank you - a very welcome tutorial, for someone who is new to Wordpress and just trying to male sense of the Twenty Twenty-Three theme. I appreciate the trouble you've taken, and the extra material you've made available. Could I make the polite observation that (for me) your delivery is rather fast - I keep having to hit Pause in order to take things in. Just thought I'd mention it!
You aren't the only one! I made a second, more recent tutorial that goes at a slower pace. Check that out too - czcams.com/video/sjh-l6ajcZg/video.html
I liked it fast!
Hi Ray, this is a really good and well structured video about TT3. How come that I don't see the static page and last posts option in my reading settings? And second, when I click on Appearance > Editor, I get my what I created as "Home" and when I click on "pages" I see the "Sample Page" but not "Home"? I'm lacking to see the connection between what you did and what I did. Is there a possibility to see my problem from a remote view?
I'm facing the same problem, Can't see the "Your homepage display" option in the Reading settings
What would you suggest for examples of website designs using this theme? Are there themes built (edited) using this theme?
helpful tutorial
Hi Ray - thanks for the vid.
In the site you've built for the demo above, you have four posts...
They display three columns in a row, with the fourth post on the next row down, over to the left hand side.
Is there a way in theme 23 to have this extra, solitary fourth post centered directly beneath the second post above it?
And again, if there were five posts in total, is there a way of centering the two posts in the second row so that they are in the middle, with the gap between them then being in the centre of the page?
Many thanks.
Without digging back into the theme editor, hard to say if there's a setting to do it (it would likely be within an organization block such as a row, group or column).
If not, that's something you can tackle with custom CSS.
Great tutorial thanks🙏it helped me a lot.
Migrating my old site to the new theme is causing me some troubles, though. I can't change the URLs of my old blog posts. Therefore I can't link them in the new gallery overview. I wish I could copy the old blog posts to generate a new URL which I than could link with the new theme editor.
Is there a chance for me to get my older stuff on my new site? How would you do it if you needed to?
I'm not quite sure what you mean. Are you talking about migrating to a completely new domain/WP installation, or just switching the active theme to 2023 on your existing site? If it's the latter, your posts should still be there. If you have a second site, you should look into import/export tool.
Hi Ray. I have upgraded from Wordpress 4 to 6.3.2. I've been trying to create a pretty simple website for about 4 long days, and I believe it's time to start over from scratch and follow your terrific example in this tutorial. How can I get the default templates back? Do I need to uninstall and reinstall? Very frustrated at this point. The conceptual changes from WP4 to WP6 are kicking my butt.
That's quite a jump! Don't be too hard on yourself, I had a lot of dumb moments while learning about the new full site editing templates before recording. Plus I don't use this theme as my primary one, so there's a relearning process each time I log in.
First, depending on the infrastructure of your current website using the old theme, you may want to do an audit so you don't lose anything you already like... I go into that process here - czcams.com/video/8r0klN3yI5Q/video.html
Regarding the default templates, I'm guessing you may need to uninstall/reinstall the 2023 theme. Some of the customizations get stored in the database, my guess is the only way you can remove them like a fresh installation is by uninstalling first.
Thank you so much! I made few changes to the frontpage template and its showing perfectly fine when logged into admin dashboard but when i log out all those changes dont show up. What could be the reason can you please help?
That is often times a cache issue. A cache plugin or your web host may have saved a copy of the older layout or version. That's the first thing I'd look into.
This is great tutorial on creating and editing templates. However, how would one go about selecting these templates when adding pages. See, I'v built and edited my templates. However, when I create a new page and/or post. The option to select a template is not available.
That's a good question because I thought the option was available to select a template to apply to any give page/post. If it's not there, you'd probably have to create another template. This is a great example of where (with the old system) you could create a page + ID template built with PHP for any page/post. I don't know what the equivalent is with the block editor... I'll be writing this down and eventually look into it when I have time!
Hello Ray. I ran into an issue with the theme. By the way. Your video was amazing! Mu site looks good because of your. ON the functioning end...I'm having issue with my posts showing. I can see my post in the editor, but I can't see them on my site. I've cleared cache and still nothing.
Thanks! That one is hard to say off-hand. Is the post maybe in draft or private? Unlikely if you didn't manually change that... There are sometimes a few ways to clear cache as well.
Great tutorial mate, really what I needed! Really helpful. Here is some feedback: sometimes you could go a bit slower when dragging and dropping the various blocks and aspects, in order to retain our attention. Also when you talked about the emojis it would have been good if you could have mentioned where you can get those (like emojipedia) for people who are not so familiar :) Still great tutorial 👍
Thanks for the tips! You're not the first to say this, haha. I know exactly what you mean because I edited down a lot to remove repetitive explanations.
Right now I'm recording another 2023 tutorial, so I'll keep that in mind when editing in a few days. My goal was to keep this video as short as possible. I'll make the one I'm about to publish slightly longer with less cuts.
I probably keep emojipedia in business with ad revenue considering how many page views I have on there to copy/paste!
Just published another WP Twenty Twenty-Three tutorial with less editing if you're interested! czcams.com/video/sjh-l6ajcZg/video.html
@@RayDelVecchio Great Ray! Will check it out :)
Hi, this theme installed not problem at the begining, but recently, this theme page become unable save for any editing and changing. Do you know what happen abou it? Can you help to solve this problem?
How do I add no spacing to the gallery now? For some reason I don't see an option for it. And I can't figure out any other way.. any idea??
As a complete novice to Wordpress, there are certain questions that to most users probably seem to obvious to even mention, but to me create great confusion. Such as: It seems like each theme gives different options and controls in the admin section and thus changes the inner mechanics of wordpress itself, which gets really confusing when trying to understand how Wordpress actually works. It also makes it difficult for a beginner to know what information is applicable when searching online. For this particular theme, I haven't been able to figure out the exact relationship between templates for different types of pages and the actual pages that are then created in the pages section in the admin; for example the homepage that i edit in the editor does not show up as a page under pages in the admin section, which is quite confusing.
You are 100% correct... and it's why I've only used like 3-4 themes in over a decade! Learning a new theme and how it's setup is frustrating, so I've always selected themes that allow you to build your own templates like this.
This is because themes/plugins are built on top of the "core" WordPress features, like pages/posts/settings. Honestly, that's how I learned at the beginning... changing themes and seeing what *didn't change* from the admin. That'll help you identify the core features.
The themes and plugins are custom code (the creator can add any feature they want), and custom settings stored in the database (check out my video on that for a deeper understanding).
The templates can apply to multiple pages. What determines that is the template hierarchy (that's a little advanced). You need to use the "Post content" block within the template to show whatever content you create from the "Pages" or "Posts" section. Also agree some of the terminology is confusing.
WP is software you have to use and test things on your live website.. and eventually, it starts to click. With power comes a bit of complexity, haha.
@@RayDelVecchio Thank you so much for your detailed reply, which was immediately helpful!
Talking about a photography portfolio site I would also add a portfolio functionality. What's the easiest way to implement that?
You can create a "Portfolio" blog category and link that within the menu.
You can also build a custom template with the features you want, and manually assign it to whatever pages/posts you use for your portfolio projects - that's an option on the right sidebar "Post/Page" settings tab!
@@RayDelVecchio Thanks for your input! I didn´t expect, to be honest, that building a custom template is in fact really easy to do with the block editor. It´s hard to believe that with my old WordPress website i thought i had to code these templates myself with HTML and CSS.... i just didn't know any better. So my new website with Twenty Twenty Three will be live in a week. Thanks for your help!
Can we a different menu in footer (other than navigation)
Yes, you can create a new custom menu.
Hi Ray, thank you so much for this fantastic tutorial. I have learnt a lot! And Gutenberg doesn't seem to be so bad....
I have a question: is it possible to make a sticky header with twenty twenty-three? Or do I need a Plugin?
Great to hear! A sticky header will require a little hacking, most likely. I'd start with the DIY method because it might be as easy as one line of CSS. Check out this example - dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3 - and you can browse my other tutorials for a deeper dive into CSS, or even creating a custom plugin!
@@RayDelVecchio Thank you so much for the Example of Akhil Arjun. It sounds so simpel, but it doesn't work on my site... I have tryed via the customizer->additional css (even with !important - it's not sticky). Then I also tryed directly in the Header-Block in HTML-Header by additional css - also this doesn't work. Do I have to make this change directly in the css-file? Thanks for a feedback.
Sticky header is available in WP 6.2 due for release end of March
Did not know that... that's awesome!
@@kenclive5272 THANK YOU! GREAT!
Thanks for sharing. I have 2 questions. 1: It seems you didn't create child theme for 2023 theme? 2. There is no preview for 2023 theme, how to make sure that my website will look good before I transfer the old theme to 2023 theme? Thank you.
It's usually best practice to create a child theme, I just omitted on this one to spend more time on customizing Twenty Twenty Three. For the second question, I'd make a duplicate of your site in a staging area and rebuild on 2023. You should be able to get it to look similar if you're cloning or upgrading the design. I still need to learn more about importing/exporting your layouts for block themes though!
How do you save changes to the page template, I keep getting 'Saving failed' :/ I really like and really hate this theme at the same time because I feel like I'm running into bug after bug. Apparently using ' inside of the footer also makes saving impossible ^^"
I would search Google for "Saving failed" "wordpress" or something like this to find forum threads discussing your issue. I did a quick search and found it may be happening if you're using non-latin characters. It may be a bug, or they may be a workaround. This is unfortunately a downside of having full control over your website... more code = more bugs. Sometimes errors can happen because of server issues or PHP settings, as well. Hope this helps.
@@RayDelVecchio thanks for the reply! Found out that my server provider had an extra security thing on their control panel, disabling that made it possible to finally edit the templates 😅
Awesome! I've been through hundreds of little, frustrating issues like this, haha
I'm out of breath. Need to rewatch in slo-mo!
A bunch of people said I went too fast (which was done purposely from editing). I published a newer tutorial that's about twice as long, but more free flowing. haha.
There is a CZcams setting that lets you slow it down. I showed you down by 25%. Rewatched. We're good...
Please tell me which is a good theme for an interpreter as a freelancer. I’d really like a photo on the home page - just a simple website . Thank you ☺️
The only ones I've used recently are this one (Twenty Twenty Three) and Divi, a paid theme that I use for clients. If you're looking for simple, why not just use Twenty Twenty Three and limit your customizations? You can build the homepage exactly as I did in this tutorial.
@@RayDelVecchio that’s exactly what I thought !! I saw you build the home page and that’s just what I was looking for - I just wanted a profile pic on the home page - thank you !
Largura total como fazer ? / full width how do you do it?
How to add section in Twenty Twenty-Three Theme?
i cannot see head section in this theme can you help ?
Hey Ray. How can I add a sidebar?
I'd just add a column, then build it out directly on the template editor. You can then save it as a re-usable block.
Is it a free site to install in WordPress.
Speak fast, long intro, but informative. Thanks
No footer?
Isn't it a bit crazy that it is still not possible to use the same custom page template on multiple pages?
you did use some plugins
Just one comment. Please slow down! As a complete Wordpress newbe you have me lost within a couple of minutes I have to keep stopping the video and rewinding to try and make sense of it. So again please slow down a bit so newbe's like me have a chance to take it in.
John, appreciate the feedback. Funny you say this because I edited this down a lot. I tend to ramble when explaining certain things because I'm unaware of the knowledge level of the average viewer - it could have been twice as long but I wanted to keep it < 30 minutes and get as much info in there as possible.
I recommend you download the checklist mentioned, because it boils down each step of the video into a bullet point that you can dive into deeper.
Also check out my other WordPress beginner videos, I have a more broad overview one (in fact I just released that a week or so ago), one going into the database, along with step-by-step build a website like this one!
Just published another WP Twenty Twenty-Three tutorial with less editing if you're interested! czcams.com/video/sjh-l6ajcZg/video.html
and logo???' buh no has hecho tutorial para que se hagan paginas web paa empresas.. solo blogsites para tontos
I enjoyed watching your tutorial but being old I found you talking and doing everything too fast. Other than that it was great.
Appreciate the feedback and kind words - I did edit the video down considerably more than others but I'll keep it in mind for future ones (working on another Twenty Twenty-Three tutorial)!
Just published another WP Twenty Twenty-Three tutorial with less editing if you're interested! czcams.com/video/sjh-l6ajcZg/video.html
God I hate Wordpress so much. I'm like 10 seconds into the actual customization and I dont have a 'Set Featured Image' option. I didn't change ANYTHING from the defaults. Google results are useless. I've quit trying to learn this framerwork at least 20 times. I think this is 21.