Everything you need to know about WordPress Patterns
Everything you need to know about WordPress Patterns
Download the Ollie block theme for free at OllieWP.com and start building beautiful, blazing-fast websites with modern WordPress and Ollie.
———
Hey folks, Mike here from Ollie and in this video, I want to tell you all about WordPress patterns and how we can build beautiful websites very quickly with patterns like you’ll find in the Ollie block theme.
In classic, code-heavy WordPress themes, the design of your site was largely dictated by what designs were coded into the theme. To modify your design, oftentimes, you would need to customize the theme’s code, or hope that there were settings in the Customizer to help you customize it. There really wasn’t a way to easily add to a design or build a new one within WordPress without a page builder plugin.
With the arrival of the block editor, the site editor, and block themes, those days are long gone. Now, we have powerful design tools like patterns and a customization interface to build our sites visually, in more of a no-code fashion.
Patterns are a huge part of this new paradigm. Patterns are collections of content blocks arranged in a pre-designed layout. A pattern can be as small as a few lines of text, or it can be as big as a full-page layout. Patterns make it easy to design new pages because you can insert new designs or build full page layouts with just a few clicks. Themes like Ollie come packaged with a bunch of beautifully designed page and section patterns that can save you a ton of time when building a new site.
And now, with WordPress 6.3, we have something called synced patterns, where we can globally update all the instances of a pattern throughout our site in one centralized location. Between patterns, synced patterns, and template parts, there’s a lot to cover, so let’s hop into WordPress and start learning about patterns.
You can download the Ollie block theme for free by visiting https://olliewp.com.
Content
0.9 -> Hey folks Mike here from Ollie and in this video I
want to tell you all about WordPress patterns and
6.9 -> how we can build beautiful websites very quickly
with patterns like you'll find in the Ollie block
11.88 -> theme now in classic code heavy WordPress themes
the design of your site was largely dictated by
18.6 -> what designs were coded into the theme and
to modify the designs oftentimes you would
23.64 -> need to customize the themes code or hope that
there were settings built into the customizer to
29.16 -> help you customize it there really wasn't an easy
way to add to a design or build a new one within
34.38 -> WordPress without something like a page builder
plugin but with the arrival of the block editor
40.26 -> and the site editor and block themes those days
are long gone now we have powerful design tools
46.32 -> like patterns and a customization interface
to build our sites visually in a more no code
51.72 -> fashion and patterns are going to be a huge part
of this new paradigm patterns are collections
57.78 -> of content blocks arranged in a pre-designed
layout so a pattern can be as small as a few
63.18 -> lines of text or it can be as big as a full
page layout and patterns make it super easy
68.64 -> to design new pages because you can insert new
designs or build full page layouts with just a
73.8 -> few clicks and themes like Ollie come packaged
with a bunch of beautifully designed page and
78.72 -> section patterns that can save you a ton of time
when building a new site and now with WordPress
83.94 -> 6.3 we have something called synced patterns
where we can globally update all instances of a
90.42 -> pattern throughout our site in one centralized
location between patterns synced patterns and
96.3 -> template Parts there's a lot to cover so let's hop
into WordPress and start learning about patterns
106.08 -> okay so for this demo I'm going to be using the
Ollie block theme which you can download for free
110.88 -> at olliewp.com and Ollie's going to be a great
theme for this demonstration because it comes
116.28 -> with a lot of patterns and we can use that
to learn the whole pattern system so let's
120.66 -> go ahead and hop into the WordPress admin and
for this first section I mainly want to focus
125.52 -> on how do we see the patterns we have available
how do we browse patterns and and work with them
130.74 -> and there's there's there's basically two ways of
doing that first let's focus on the site editor
136.02 -> so once you activate a theme like Ollie you get
a new menu item under appearance called editor
142.32 -> so let's click that and I've done a whole video
on the site editor interface so be sure to check
147.84 -> that out but we're going to focus mostly on the
patterns link for this section here so um in this
155.04 -> view we're able to see a categorized list of all
the patterns available from the Ollie theme so
161.4 -> we can click through and scroll and see all the
different styles available cards call to actions
168 -> hero headers and we can effectively use all of
these patterns or like page sections to build
175.62 -> Out full pages and it also comes with full page
design so we've taken all of these patterns and
180.96 -> compiled them into full layouts already for you
as well and so this interface is great for for
187.8 -> browsing patterns but there's also another place
to look at these patterns so I'm going to hop out
193.32 -> and go into a page and add new and once we're in
the page or posts interface we can also browse
201.3 -> patterns by clicking the block inserter and you
can see here we have a patterns Tab and in this
207.12 -> view we're looking at the same categorized list
that we had in the site editor so I can again I
212.82 -> can click and scroll through each category and
see all of the patterns available and I can also
221.46 -> click explore all patterns and that gives me the
same list of patterns but it's a bigger widescreen
228.06 -> view so it's easier to see all the patterns and
it just gives me a nicer view to look at them
234.3 -> and so the this is the the main two ways we can
use to browse patterns in the next section we'll
241.92 -> look at creating a full page with uh some of
the patterns provided in the Ollie block theme
250.8 -> all right so now that we know how to access
patterns and where to find them let's go ahead
255.72 -> and see how quickly we can build out an about
page with one of the full page patterns in the
259.92 -> Ollie theme so I'm going to go up here to the
block inserter and click the patterns tab again
263.94 -> and click explore all patterns I like this view
better because I can see everything in a nice
269.52 -> big display and let's go ahead and click the
pages category and you can see here we have a
275.04 -> few different full page designs I want to go
with this about page and so let's click that
281.16 -> and just like that you can see the whole
pattern has been inserted onto the page
285.3 -> and we have a full design ready to customize
but you'll notice it's a little funky still
290.46 -> um the the design doesn't quite go to the full
width of the page um and that's because this
295.8 -> page is using the default page template which
is great for your standard Pages your contact
301.08 -> page your privacy policy but this design is using
patterns and we want them to go the full width we
307.14 -> want an expressive design and to do that all we
have to do is apply a template so I'm going to
311.94 -> go up to the page settings and click the template
drop down and I'm going to click page no title and
319.44 -> that's going to do a few things for us now that I
scroll down the page you can see that the pattern
324.78 -> is now going the full width of the page which
is great but also what it does on the front end
331.26 -> is it removes that page title at the top of
the page and so we can now use the patterns
336.9 -> to go full width and full height and they
can take up the full kind of content area of
341.76 -> our page but you might notice that we removed
the page title so that does present a problem
349.26 -> um that was where the H1 for the page is which
is very important for SEO reasons so we need to
354.18 -> go back into our design and make sure we have an
H1 so that we continue to rank well in Google Etc
361.44 -> so we're going to come back here and we're going
to change you can change whatever you want to be
365.88 -> your H1 but I'm going to change this big headline
here and I'm going to call this the H1 now and you
371.64 -> can see it changed the size of the font because
we changed the heading and we can just fix that
377.22 -> by changing the font size here and just like that
so now we have a full width page the page title
384.6 -> has been removed we have an H1 and you know if we
want to even add more we can add more patterns to
391.74 -> this area by going back in here patterns text we
can find um you know maybe this Emoji section and
401.94 -> it's just that easy to build out beautiful designs
with patterns just by browsing what's available
408.54 -> and being creative with the patterns that we have
so that's how you create with patterns and the
414.06 -> next section we'll learn how to create our own
patterns that we can use throughout our designs
422.22 -> all right so we just learned how to use patterns
that were included with the Ollie theme but what
429.24 -> if we wanted to create our own patterns
in WordPress how do we do that do we have
433.5 -> to write code you know how how do we actually do
that well it's actually pretty simple these days
438.48 -> and there's a few ways to do it so um first I'll
show you because we're on this page what we can
444.72 -> do on any design any group any section we want
we can click and I'm going to click the tree
452.28 -> view to make sure we're selected on the right
thing I want to turn this box into a pattern
457.26 -> so now that I have that selected I can click this
menu and use this item here called create pattern
465.18 -> slash reusable block and when that pops up we
can name our pattern I'll call this contact
471.42 -> details and we have the option to have it synced
or unsynced I'm going to come back to synced in
477.3 -> a second because it's a it's its own thing
I want to turn that off for now though and
482.1 -> I'm going to click create and I'm going to copy
this block so I'm going to need it in a second
488.64 -> okay so now that we've created that pattern we
can come back over here into our site editor
498.78 -> and if we click down on the patterns we can
see that there's our pattern so it's available
503.34 -> on our site now we can customize it and use
it throughout our site now in this pattern
509.82 -> interface you can also create a pattern here
so I can create that same pattern if I want
513.54 -> I could create pattern and you know contact
details too and create and then it gives us
522.18 -> the site editor interface which we can use I can
paste in that design and we can create a pattern
527.88 -> that way as well and so that's how we create
a standard pattern and the thing with Saturn
533.82 -> standard patterns is that they basically belong
to any page that you put them on so if I insert
541.26 -> a pattern onto this page it basically belongs to
the page if I use this pattern on 10 different
546.84 -> pages I would have to go update that pattern on
10 different pages and so that's where synced
553.08 -> patterns come in so let's in the next section
let's check out synced patterns and see how we
557.76 -> can alleviate that and update the pattern in one
place and have the update go to our whole site
567.3 -> okay so we just created a standard pattern
which was great it was awesome we were able
572.22 -> to create our own pattern within the WordPress
interface didn't have to write a line of code
576.84 -> to do it that's awesome but we can also take
patterns to the next level with synced patterns
582.42 -> so like I said in the previous section
you know creating a pattern if you use
587.34 -> that pattern on you know several different
pages and you want to make a change to that
591.84 -> pattern you would have to go change that in
all of those different pages that you used
595.44 -> it on but with synced patterns we can create
one pattern and use it throughout throughout
601.08 -> our website and we can update it in One
Singular place so let's turn this pattern
605.34 -> into a synced pattern so I'm going to do this
again I'm going to go create pattern synced
613.56 -> and I'm going to call this contact infosync and
I'm going to create that you can see it kind of
618.3 -> changed the pattern out and it placed this icon
next to it and that means that this is a synced
623.58 -> pattern so I'm going to go ahead and update
that and let's go back into our site editor
628.32 -> and you can see here it is now here and we
have the icon here and contact info synced
633.6 -> and so now when I update this pattern if I
change this to Mike at example.com and update
643.14 -> you'll notice that if I go ahead and refresh
this this updated right here in this box and
651.3 -> that would be true if I had this pattern on 10
different pages and so that's super helpful and
656.7 -> like imagine you have a restaurant you have your
hours you you don't want to necessarily have to
661.68 -> go through your site and update all the places
that you have your hours listed you can have
665.28 -> them in one pattern and update it in one location
and those changes will propagate throughout your
670.32 -> site okay so that's great but say you have a
pattern a synced pattern and on one particular
677.28 -> page you want to do something a little different
with that pattern maybe you want to just change
681.54 -> the information slightly based on the context
of that page well in that case what we can do
686.16 -> is detach it so in that same menu I can right
click here and I can do detach pattern and now
692.82 -> what that did is basically turned it into a
regular pattern again so now if I update the
697.32 -> synced pattern at the global level those changes
will not make it to this pattern so we can we can
702.66 -> change the content here however we'd like and
it will not be affected by global patterns so
709.8 -> um all of these things kind of come together and
give you a lot of options about how you build
714.78 -> your site you can be really creative with how you
use patterns and synced patterns and on that note
720.18 -> we have one more kind of piece to the puzzle of
patterns and that's template parts so in the next
726.12 -> section let's go ahead and look at template parts
and how those fit into the structure of our site
734.16 -> all right so the last thing I want to talk about
in this patterns video is template parts so
740.1 -> I'm back here in the site editor View and in the
sidebar we have a template Parts area so template
746.46 -> parts are basically Global areas on our website
such as headers and Footers it's those sections
752.88 -> that are available on pretty much every page of
our site and using template parts we can assign
758.94 -> patterns to those areas and then update them in
one area and have those changes propagate through
764.28 -> our throughout our site very similar to synced
patterns but there's some other cool things we
769.2 -> can do with template parts that we can't quite
do with sync pattern so let's check out a few of
773.88 -> those things I'm going to hop over to the template
editor so now here I'm editing one of our page
779.1 -> templates now if I click on the header which I
can do by opening the tree view to make sure I
785.34 -> have it selected and I'm going to click this menu
here and we have an option called replace header
792 -> and I'm going to click that and what that's
doing is showing us all the patterns in the
796.68 -> Ollie theme that we can use that are specific
to this template part so we have our header
803.16 -> template part so it's showing us all the patterns
in our theme that would fit and work well here so
808.68 -> we have all of these template Parts I'm sorry
these patterns in Ollie for the header area so
815.82 -> let's go ahead and change our header to this
header light with banner and see what happens
822.18 -> you could see we just went from our old dark
header to now we have the slight one we have
828.36 -> a new kind of call to action bar across the top
and we have a new light color palette so we were
834.54 -> able to very quickly swap out our header with one
that is also designated for this area and we can
840.24 -> also do that for the footer so let's go ahead
and do that as well we can click replace footer
845.82 -> and again we're met with all kinds of patterns
that we can use to quickly swap out our footer
851.22 -> we don't have to design our own Footers or go
in and kind of manually put patterns in there
855.36 -> we could just use this little um replace feature
here so let's go ahead and we'll maybe replace it
862.08 -> with this light footer and you can see we have a
nice New footer design so that is template Parts
868.62 -> in a nutshell it's basically being able to update
with patterns of these areas these Global areas
874.26 -> and quickly make changes that can propagate to the
rest of our site all right folks I know that was
880.98 -> a lot patterns are such a huge feature and with
regular patterns and synced patterns and template
887.04 -> Parts there's really a lot to dig into here but
I encourage you to dive in because we're going to
892.14 -> be spending a lot of time designing patterns
working with patterns creating new ones and
897.66 -> all of the other features that we haven't even
seen yet coming to pattern so I encourage you to
902.4 -> check them out again download Ollie for free at
olliewp.com it has tons of patterns that you can
907.98 -> work with and learn how I designed these patterns
right inside the WordPress editor so thanks
914.16 -> for hanging out I know this was a big video but
hopefully it was helpful we'll see you next time.
Source: https://www.youtube.com/watch?v=w8DehSH1_PA