docs

Use of Templates and Getting ready for Production.

Like in any other project, creating a website needs good planning and preparation long before creating your first page. The biggest obstacle you will encounter is the preconception that building a website is just choosing a layout. But in reality, building a website is making decisions over how your information is displayed to a diverse range of users across devices, countries, with different levels of knowledge and familiarity to the web. The result will dictate how people will find you, what the see when they do, how people with a visual impairment will interact with your site or how exposed is the data you take from your excited subscribers. So don’t be afraid to put that time aside to research and consider what is best for you, your brand and your users. That way you won’t be at a loss when it comes to choosing the right steps to achieve exactly what you set out to do.

Once you have a list of what the website needs to be, it is a good habit to plan, sketch or even draw on a paper the design you have in mind and what basic features or blocks you visualise about the page you want to create.

This will also allow you to analyse the user journey, which is the path the users can take from landing to conversion. The conversion can be any positive outcome or transaction triggered by the visit. From brand awareness to social sharing, liking, subscribing, calling or contacting you.

What about the negative outcomes? Think about what happens when a client clicks a link that doesn’t exist. Should it redirect to something better, offer a search or show a page not found. Make a different list of the negative outcomes, and make sure to tackle them all, trying to offer a new path to turn them into positive conversions.

All this might sound too complex, and that’s why we help our clients plan their websites from the co-pilot sit, and choose the most visually attractive tools for them to manage their content. The best way to avoid the anxiety of it all it’s to narrow down the scope of the project at the start to a comfortable point, starting with a landing page that can be a temporary banner for your brand. From there, add information to your sketches and expand upon, linking sections and highlighting the information that could lead them to what they want.

Once this is done, you can go into your CMS and start using the editor to create those layouts you have envisioned.

WordPress v5.9 offers the new Full Site Editing which allows us to visually create beautiful and specific layout with functionality. The pages you create will have a default structure that you can define, called Templates. 

A template is an individual layout that is saved on your system and contains predefined branded content, such as a logo and a menu, that can be used by any new url you create on your website. This way, your site could have the same layout all throughout, or you might decide to make pages different depending on the content you plan to add. 

With unlimited templates and unlimited URLs, making your website stand out will come down to how your content is organised for users. This is called a Sitemap, and it’s the collection of URLs that are available to visit publicly. This can be given to search engines to help indexing your content, and they are most useful on sites with frequently updated content. In order to create this sitemap, you need to list all the places your users can visit on your site, and their relationship.  

The bespoke theme that Commonwealth Chemistry uses is called Evergreen, created by Ruben Madila, and this theme offers a few basic templates with their specific aim:

Custom Templates

This action will trigger a new editor for the new page you just created. In this editor, you’ll find a vertical tab on the right side with a section called Template and the default template selected already. You will then see the option of “new”. (see attached picture n2).

The creation process of the template will then ask you to name this new template, but do not worry as it can be renamed whenever you edit it.

As you give it a name, you have created your first custom template and with this, you will be choosing how your selected new pages will display and it brings us to the next section because now we are entering the Full Site Editor.

Template parts and Template editing (Full Site Editor)

Once we have our custom or default template we can enter the template editor. (see attached picture n3).

This editor will  trigger right after you created and named a new template, or for another way, when you are editing a page, go to the Template section (attached picture n2), select the template you want to edit and select “edit” (right on the left side of “new”).

When you are on the template editor as you can see on the attached picture number 3. We can then select which template parts you want to display and where. But before explaining about template parts, let me introduce you to blocks. Blocks is how WordPress calls and refers to the boxes of elements that a website displays on the screen. 

Everything is a block, from a paragraph or a heading, to a full-width background or a youtube embedded video in the middle of your site. If you look at the picture number 3 just above, you can see OLLIEFORD.CO.UK which would be the “site title” block, underneath with “Just another WordPress site” that would be “site tagline” which you can remove, the same as any block. 

Under those you can see a horizontal short line in grey. This is called a separator block, just for graphic differentiation of layout groups. Important is the blue line with a plus symbol just under it. This is not a block yet but the indication when you hover on the template that at that point on the layout of the template you can place another block.

Block options (Three vertical dots) ⇒

After the options for the block appear, we must go to the last one “Remove Post Title (it will display [Remove] and whichever the name of the block is). Clicking on this option will remove this block and on the display of the page we will publish, we won’t have the page name.

Template parts, as its name indicates, are the parts that will display on the page that uses that template. I will describe a common template structure. Usually, from top to bottom we find the header, page content or “post content” as WordPress treats every page as a post, and finally the footer. Now you can remove the footer and only have header and post content.

This is where I feel I should explain as It can lead to mistakes. Template parts can be reused. You can have one header for your site and add it to the top of your templates, and the same with the footer. In between them you can place the post content, but wait. There are two ways to edit a page, when you are visualising a page, you’ll see “edit page” and “edit site”. If you access the page editor, you’ll be editing that specific page “post content” whether if you access the site editor, you’ll have access to the template parts, which we have seen before. So when your template just displays “post content” in the desired place. You can exit the site editor and access the page editor and edit the content.

Editing a page with the Page Editor.

When on the page editor, you won’t see the header, footer or other template parts you might have carefully crafted on your custom template or added to one of the existing WordPress templates. You’ll have to trust that they are there, and if not, revisit your template with the site editor at “edit site”.

When you edit on “edit page”, you will be editing only the template part “post content” that you placed on your template. This Post content will be unique to each page and it’s the personality of each page. This is where the blue print, (the template) does become a finalised and customised product. Here is where you should include all page specific content. Whether is a gallery with pictures, an informative video or all your products information and breakdown.

To get more information about the Page Editor, please check out our Page Editor Documentation.