Creating content in WordPress is at the heart of building a dynamic and engaging website. Whether you’re writing blog posts, crafting static pages, or curating multimedia-rich articles, WordPress offers a flexible and user-friendly editing experience.
Topics:
- Nesting and using blocks to create visually appealing content
- Using block patterns
- Embedding media and third-party content on your website
- Taking advantage of query loops
- Using the Comments block
- Designing with the Columns block
- Using the Group block
- Designing with Row and Stack blocks
Nesting and using blocks to create visually appealing content
Using block patterns
Transcript
What are block patterns?
But what are patterns? Block patterns are pre-made designs or layouts of grouped blocks that are available to modify and change to meet your needs. It will essentially save you time but also enhance creativity and design. Instead of nesting and grouping blocks together, patterns have already done that for you. In one click, you will have access to beautiful and functional layouts from calls to actions, headers, columns, galleries, and more.
Adding a theme pattern
To add a pattern, click on the plus icon on the top left, also called the Inserter, and open up the patterns tab on the right next to Blocks. At the top, you will see all patterns. Below are all the synced and non-synced patterns you have created yourself. Synced patterns are marked with a purple icon and non-synced patterns don’t have one, but more about synced and non-synced patterns in a moment. Below My patterns, you will see the patterns that come with your theme. They are organized into various categories to help you find what you need. Once you click on the category, you will see a preview of all the available patterns when you scroll down.
You can also select Explore All Patterns at the bottom to get a bird’s eye view of the patterns that come with your theme. You can also go through them category by category. Let’s look at a quick example. When you select a pattern, in this case, one from my Featured category, you can modify the pattern to meet your design requirements. It can easily be edited in the same way as any other block. You can change the alignment of the container block. You can edit the heading, update the content, replace the images, and, for example, change the background color of your pattern as well as other styling options. But all the hard work and the layout have already been done for you. The only thing you have to do is select the pattern and modify it to meet your requirements.
Using the Pattern Directory
The patterns that come with your theme are limited. If you want more patterns to choose from, you can explore the Block Pattern Directory. To do that, let’s make our way to the WordPress.org website. Click on “Extend” and then select “Patterns”. Here, you can search and find new patterns on your website. You will notice there is an option to view only curated patterns or hundreds of patterns that have been added by the WordPress community. You can type in the search block, search by category, or browse through all the available options until you find what you’re looking for. Once you find the pattern you are after, you can click on the “Star” to add it to your favorites. When you are ready to add the pattern to your site, open the pattern, click on “Copy Pattern,” return to your website, and then paste. Then, you can start changing and modifying your pattern. This is what my pattern looks like after altering it to meet my design needs.
Managing patterns
When you make your way to the Site Editor and in the Side View you will see a Patterns tab. Here you can manage, edit, and create all of your patterns, synced or not, along with your template parts. When you click on “My Patterns”, you will see all your custom patterns. The synced patterns have a purple icon, and the unsynced patterns don’t. If you hover over the purple icon, it clearly says, “Editing this pattern will also update anywhere it is used”. Below custom patterns, we will see all the available categories as well as the patterns that are provided by your theme. It is also worth noting that when you click on the three vertical dots of a pattern that comes with your theme, you can also duplicate and add that pattern to your custom patterns area, and when you’ve saved it as a custom pattern, you can modify it as you, please. At the bottom, you will find all your header, footer, and general template part patterns.
Custom patterns
Let’s start with your own patterns. If you click on the plus icon next to “Patterns,” you can create your own custom synced or unsynced patterns. After naming it, you can add it to the relevant category, in this case, the “Call to Action” category, and then you can choose to sync it. In this example, I will choose to sync the pattern, and at the bottom, it says, “Sync this pattern across multiple locations.” And now you can start creating your synced pattern, and when it is ready, we can click “Save”. To create a pattern in the block editor, merely select the design, click on the three vertical dots of the block toolbar, and select “Create Pattern.” Then, follow the same process as before, and I will once again select a synced pattern. So, if you love a design, you can save it and reuse it as a synced or non-synced pattern.
Template part patterns
Lastly, let’s talk about template parts. To manage your header and footer, you have template part patterns at your disposal. Templates create a design for a webpage, and this is usually done by adding a header and footer template part. Let’s look at an example and open up our page template. When you open your page template, we can go ahead and select our current header and then click on the three vertical dots. Next, we can select “Replace Header.” When you do this, you can select one of your existing template parts or patterns that come with your theme. And it works exactly the same way with your footer. Below Patterns, you can manage and edit your existing template parts. To add a new template part, click the plus icon next to “Patterns” and select “Create Template Part.” Here, you can select between creating a general, footer, or header template part. To create a new header template part, name it appropriately, select “Header” and then click “Create”.