In this series of articles, we’ll walk through examples and scenarios which will hopefully then help open your eyes to the power and facilities of WordPress<\/p>\n
Aim<\/h2>\n
A key aim of these articles is to encourage you to really think<\/em> about the content you are planning to put on your website (whether that’s a completely new website or a redesign of an existing online).<\/p>\n Put another way, I want to equip you with a mindset so that you don’t end up being lead by how your chosen WordPress theme operates*, or how WordPress by default organises content. Allowing that to happen is very much letting the tail wag the dog. Instead, we want to take control & plan accordingly.<\/p>\n (*WordPress themes dictate how your website looks. They also dictate how certain things work ‘under the surface’ of your website.)<\/em><\/p>\n Whether you are planning a completely new website or revisiting your existing website, a good place to start is by creating a sitemap diagram.<\/strong><\/p>\n A sitemap diagram displays the overall structure of your website; showing your website\u2019s various pages & sections. E.g. here is a part of a sitemap we are working on now:<\/p>\n Fig 1 – visual sitemap diagram (part of)<\/em><\/p><\/div>\n However, when studying a visual sitemap diagram, we need to bear in mind two crucial points:<\/p>\n Both of these two concerns are valid and should be addressed in other stages of the website design process. At this stage though, we simply want to capture the overall structure of the website – creating a box for each page\/section we require.<\/p>\n Note: the term sitemap here should not be confused with things like Google Sitemaps which are machine-readable feeds detailing our website structure. Whilst important, they are not relevant in this planning stage. Here we are taking about visual sitemap diagrams.<\/em><\/p>\n How you create your sitemap diagram is up to you. E.g you can:<\/p>\n Let\u2019s discuss these so you can decide what route is best for you.<\/p>\n Here we simply write a bullet-pointed list of the pages your site will need.<\/p>\n Let\u2019s create such a list for a hypothetical website for a consultancy.<\/p>\n As you see from the above, we start with the homepage and, in truth, every other page tends to be a sub-page (or child page) of the homepage. For a few options above we have put the URL slug in brackets after the plain text description of the page.<\/p>\n Note also that some of the pages also have their own<\/em> child pages. E.g. \u201cWhat we do<\/em>\u201d (\/what-we-do\/<\/strong>) – this is a page that presents a broad overview of the services the consultancy offers. This summary allows visitors to click to find out more details about any particular service, which is why we have child pages such as \/what-we-do\/service-1\/<\/strong>, \/what-we-do\/service-2\/<\/strong> etc. Where each child page is focused purely on a particular individual service.<\/p>\n In this example above we\u2019ve used rather dull names such as \/service-1\/<\/em>, \/service-2\/<\/em>, and \/service-3\/.<\/em> But things will probably come to life a little more if we use better examples, e.g. for a web design company they could be:<\/p>\n Here, on a web design company website, the \/what-we-do\/<\/strong> page can present a summary of all the key services it offers: web design, hosting, and support. For each of those services, the website visitor can click to find out more about a particular service via the three individual service pages.<\/p>\n You might be thinking \u201cwell, that looks like a waste of time! Why not just have the single \/what-we-do\/ page and leave it at that?!<\/em>\u201d.<\/p>\n Well, whilst you could<\/em> do that, there are benefits of splitting things out on to separate pages.<\/p>\n For one thing, if someone said to you \u201cHey, can you send me some details on your hosting options, please?<\/em>\u201d, you could direct them to \/what-we-do\/support\/<\/strong>. Now if this information only existed on the summary \/what-we-do\/<\/strong> page, whilst you could<\/em> still send them there, the experience would be messy as the visitor needs to hunt around the support information,.<\/p>\n In the above example, it\u2019s fair to say that the \/what-we-do\/hosting\/<\/strong> page will be where the company goes into the deepest detail about what \/hosting\/ facilities it offers. All of the content on the page will be very focussed around \u2018hosting\u2019, and the page URL even includes \u201chosting\u201d in it (\/what-we-do\/hosting\/).<\/p>\n Therefore, if someone were searching for information on ‘website hosting<\/em>\u2019 in Google, then this \/what-we-do\/hosting\/ page has the potential to appear prominently.<\/p>\n For this reason, we need to think carefully about what we actually call our pages. E.g. you could argue that the \/what-we-do\/hosting\/<\/strong> might be better called \/what-we-do\/website-hosting\/<\/strong> and you may be right. However, we\u2019re not going to worry about that too much at the moment. At this stage, we\u2019re simply looking to document the required website structure – we\u2019ll worry about exact page names\/URL names later on when things have settled down a bit.<\/p>\n Let\u2019s go back a step though, and see how we could realise our example sitemap structure in a visual sitemap using a tool or an app.<\/p>\n There are many tools you can use here: from Visio, to PowerPoint. I\u2019m going to demonstrate one I particularly like: Miro<\/a>.<\/p>\n I used Miro to create the sitemap diagram in Fig 1 above. And here is an old video for how you can generally use Miro:<\/p>\nPlanning<\/h2>\n
![\"Fig](\"https:\/\/www.glassmountains.co.uk\/wp-content\/uploads\/2021\/02\/Screenshot-2021-02-20-at-12.29.29-1024x608.png\")
\n
Creating your sitemap<\/h2>\n
\n
A Simple list of pages<\/h3>\n
Homepage (\/<\/strong>)\r\nAbout (\/about\/<\/strong>)\r\nWhat we do (\/what-we-do\/<\/strong>)\r\n- Service #1(\/service-1\/<\/strong>)\r\n- Service #2\r\n- Service #3\r\nExamples of our Work\r\n- Example #1\r\n- Example #2\r\n- Example #3\r\n- Example #4\r\nFAQs\r\nContact<\/pre>\n
\/what-we-do\/\r\n\/what-we-do\/web-design\/\r\n\/what-we-do\/hosting\/\r\n\/what-we-do\/support\/<\/pre>\n
Why not put it all on one page?<\/h4>\n
Another benefit is SEO.<\/h4>\n
Visual Sitemap<\/h2>\n
\n