Log in

2. Content Organization, Layout & Design

IN PRODUCTION:This essential lesson advocates the importance of building & managing your website’s content. While currently still under development, you are welcomed to check out my progress thus far.

Posted

in

by

diette

Tags:

Manage your content creations.

Learning Objectives:

  • Define taxonomy and describe how WordPress implements them.
  • Create categories and tags.
  • Apply categories and tags to posts.
  • Manage descriptions and slugs for categories and tags.
  • Utilize widgets for category and tag lists.
  • Create the content for a Post or Page using blocks.
  • Design an advanced layout using multiple blocks
  • Set up a Navigation menu with a block theme.
  • Arrange Navigation block items in a block theme.

Lesson Two

Suitable for all skill levels

wordpress v6.3+
twenty twenty-three+










Prerequisites: 







View Lesson One: Site Tour, Setup & Your Users







Final word of advice:





Think Content First. Add design to your existing content, instead of building content from your design & save time.









(video currently in production & coming soon)





… in the meantime, checkout the last published lesson from the wordpress out-of-the-box playlist:  








length 23:41 “Setup, Start Building Your Website & Connect With Your Users”.





Lesson Script Summary





HTML semantics, blah blah blah. Here’s what you need to know.





Anatomy of a web page 





I want you to think about your web page as if it were an essay. Yes, you are being graded on proper page formatting. Formatting affects your SEO (Search Engine Optimization), accessibility (), performance (speed) and is, generally, the easiest way to overall improve your website.





here is the basic structure of every web page:





<!DOCTYPE html>
   <html lang="en-CA">
      <head>
         <meta charset="UTF-8">
         <style>
         <script>
         <link>
         <title>Web Browser Title (page title)</title>
      </head>
      <body class="">
         Webpage Content: see "website html layout"
      </body>
   </html>





for now, let’s focus on what’s happening between the <body> tags. 





<body class="">
   <header>
   <main>
   <footer>
</body>





<header> //the overall website header 
  <nav> //should include the main navigation
</header>





as mentioned in the previous lesson, websites are composed of a <header>, <main> content area & <footer>. we’ve already addressed the <header> & <footer> so let’s take a look between the <main> because this is where the bulk of our content lies.





when we build a page with blocks – we are composing these inner elements.





let’s have a look at the majors:





<main> 
    <section> //Defines a section in a document
    <article> //Defines an independent, self-contained content
    <aside> //Defines content aside from the content (like a sidebar)
    
    <details> //Defines additional details that the user can open and close on demand
    <summary> //Defines a heading for the <details> element
</main>





alternatively, consider this: 





<main>
   <article>
      <header> // page header
      <section>// use multiple sections to organize your pages content
      <aside>  // page sidebar
      <footer> // page footer 
   </article>
</main>

<section>, <aside>, & <article> //can each have an inner <header> & <footer>





additional html semantic tags can be found here:
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/html/html5_semantic_elements.asp





why am i telling you all of this?





if building a website were a game, the objective would be to avoid using as many <div>s as possible 





helpful resource: https://www.w3schools.com/html/html_accessibility.asp.





coincidentally, this aligns with my thoughts on why i hate page builders but I digress…





Let’s format our content





from the Lesson One Assignment, i only asked you to use <h2>s & <p>aragraphs to compose your page and post. now that you have some real content, we can work on formatting first & then styling.





Just like an essay, your webpage has only one title. It is best practice to ensure that the page/post’s slug (a.k.a. url) matches the title. 





This post/page title is the one and only <h1>heading tag. there is always only 1 <h1> per webpage & should be located at the top of your document.  This is the title of your website & just as there is only one title in an assay, it is always the first element to appear on your document or webpage.   





All other headings on this page are an <h2>heading tag because headings have hierarchy. Just like essays, Headings are always followed by content ( <p>aragraphs of text) . It is best practice to include an intro paragraph, or topic sentence expanding upon your title before introducing any sub headings.





If you have headings without paragraphs then these are not headings. I call these “floating statements”… you wouldn’t put a title in your essay without having paragraphs to follow & explain what the topical heading is about. So please reconsider using a heading tag, & ask “what is this block of text’s purpose?” because this may just be a <p> styled similar to a heading.





Break up sentences with 3 or more <li>list items, they are better served as an <ul>unordered list block. Given our example, the first <p> of our essay, contains our thesis/topic points.  Separate these points, highlight & convert to a <ul> which is easier to read upon first glance of this website.

Alternatively, if you’re content is lengthy you can convert text into buttons & anchors to fast forward the reader. 





    

  • review text blocks
    • 




  • review style options (toolbar inline, block options)
    • 




  • review design blocks & map to appropriate semantic container <html>
    • 




  • review remaining blocks (micro-machine style, lol)
    • 




  • — buttons* – should only serve function within your website ( don’t link this to an external link ). 
    — think outside the box: psst “Designers …a button is a CTA (Call To Action)”. 
    • 






once our post/article is completed we need to assign it a category (aka taxonomy).





    

  • importance of taxonomy
    • 




  • understanding category vs tags
    • 






digging deeper into design 





    

  • edit global block styles
    • 




  • edit block styles
    • 




  • creating patterns
    • 






how to set fonts

Appearance > Manage Theme Fonts





The “Create A Block”  plugin installed in Lesson One enabled the capability to add & remove fonts for our website.  Font loading affects website performance (speed) so be cautious moving forward and only add necessary fonts.  












Lesson Assignment:





    

  • create & start a glossary for your website.
    • 






Homework Help: 











                
		                
		                





Login to mark this lesson complete.








Comments









	

		
Leave a Reply