Karen Greene – Demystifying WordPress: An Overview of the Concepts and Ecosystem

ABOUT THE PRESENTATION

Every field has its own set of jargon, and WordPress is no different. In this presentation, we will define some of the common jargon and answer some of the common questions posed by those who are new to WordPress. We will start out assuming no knowledge of WordPress at all but will continue on to “advanced beginner” and intermediate questions that tend to arise once you’ve spent a bit of time working in WordPress.

ABOUT THE PRESENTER

Karen Greene, a long-time West Orlando WordPress co-organizer and host, built her first WordPress site in 2013. It was a personal blog, and all she knew how to do was choose a theme, change some colors, and start writing. In 2018, she volunteered to rebuild the Florida Tropical Weavers Guild website and quickly realized just how much she did not know about WordPress and websites. Since then, she’s been on a mission to improve her skills and now builds and maintains complex sites. So far, she’s been completely “no code” but has recently been dipping her toes into CSS, and glancing sideways at PHP.

SUMMARY

Comprehensive Overview of WordPress: Understanding the Core Concepts and Components

WordPress has become a household name in the world of website creation and content management systems. In a recent presentation, a comprehensive overview was provided, digging into the fundamental concepts and components that make up a WordPress website. This article aims to break down the key points covered in the presentation and offer valuable insights for both beginners and experienced users alike.

Internet Basics: Unraveling the Mysteries of the World Wide Web

The internet, a vast network that connects billions of devices worldwide, operates on a simple yet intricate system. At the core of this system lies a host, also known as a server, which stores and delivers website content to users. A URL, or web address, acts as a map to these servers, allowing users to access specific websites.

Websites are constructed using various programming languages, such as PHP, MySQL, HTML, CSS, and JavaScript. These languages work harmoniously to create visually appealing and functional websites. It’s important to note that website speed can be influenced by factors such as server performance, internet connection, and the user’s device and internet speed.

Demystifying WordPress: From Blogging Platform to Website Powerhouse

WordPress, originally conceived as a blogging platform, has evolved into a dominant force in website creation. As a free, open-source content management system (CMS), WordPress now fuels approximately 43% of all websites, ranging from simple blogs to complex e-commerce sites.

One of the core strengths of WordPress lies in its structured file and database system, coupled with a user-friendly interface for content management. This seamless blend of functionality and usability has propelled WordPress to the forefront of the CMS market.

Key WordPress Concepts: Themes, Page Builders, Plugins, and More

Going deeper into the WordPress ecosystem, the presentation highlighted key concepts that underpin the platform’s functionality. Themes, which are collections of files that dictate the visual appearance of a website, play a pivotal role in shaping the website’s aesthetics.

Page Builders offer users a streamlined interface for crafting website layouts and integrating additional features. Plugins, on the other hand, augment a website’s functionality by adding specialized tools and capabilities. Understanding the distinction between posts and pages is crucial – posts cater to dynamic, time-sensitive content, while pages are tailored for static information.

Navigating the Editing Landscape: Classic Editor vs. Block Editor

When it comes to creating and editing content in WordPress, users can choose between the Classic Editor and the Block Editor, also known as Gutenberg. These interfaces provide distinct approaches to content creation, catering to different user preferences.

Patterns, predefined groups of blocks, enable users to streamline content creation by reusing specific layouts across the website. Templates offer pre-designed page structures, ensuring consistency in presentation and organization of various content types.

Embracing Full Site Editing: A Paradigm Shift in Website Construction

One of the most intriguing aspects discussed in the presentation was the concept of Full Site Editing. This innovative feature set within WordPress allows users to design and modify all elements of a website using blocks. Block themes, a novel addition to the WordPress landscape, usher in a new user interface paradigm compared to traditional themes.

In conclusion, the presentation provided a treasure trove of information for both novices and seasoned WordPress enthusiasts. By exploring the core concepts, terminology, and evolution of WordPress, attendees gained a deeper understanding of the platform’s capabilities.

For those seeking to explore further into the world of WordPress, the resources mentioned at the conclusion of the presentation offer invaluable opportunities for continued learning and exploration. Whether you’re embarking on your first WordPress website or looking to elevate your existing skills, the wealth of information shared in the presentation serves as a springboard for your journey into the dynamic world of WordPress.

TRANSCRIPTION

Rob Watson:

[Music] welcome everyone to the third Thursday Meetup of the West Orlando WordPress meetup group I’m Rob Watson a co-organizer and host West Orlando WordPress is an official WordPress Meetup Group affiliated with the WordPress Orlando and word Camp us meetup groups every field has its own set of jargon and WordPress is no different in this presentation we will Define some of the common jargon and answer some of the common questions posed by those who are new to WordPress we will start out assuming no knowledge of WordPress at all but we will continue on to Advanced beginner and intermediate questions that tend to arise once you spent a bit of time working in WordPress Karen green a longtime West Orlando WordPress co-organizer and host built her first WordPress site in 2013 it was a personal blog and all she knew how to do was to choose a theme change some colors and start writing in 2018 she volunteered to rebuild the Florida tropical Weaver Guild website and quickly realized just how much she did not know about WordPress and websites since then she’s been on a mission to improve her skills and now builds and maintains complex sites so far she’s been completely no code but has recently beg dipping her toes into CSS and glancing sideways at PHP at this point I’d like to invite everyone to mute their microphones for the presentation Karen thank you for being our presenter this evening the time is now yours

Karen Greene:

thank you all for being here let me go ahead and share my screen all right um all right these are our goals for today I want to give you a 50,000 foot overview of WordPress and we’re going to start a little bit by talking about how the internet and websites work in general so that you can see how WordPress fits in to the internet as a whole we’re going to just describe the components of a WordPress site of what it what the interface looks like and in the process we’ll Define terms as we go along ultimately what I’m trying to do is to give you wherever you are and most of the people here are beginners but there’s people here who have far more experience and skills than I do um but for those of you who are newer we’re trying to give you a way to know how to frame questions so that you can best find the information that you need in order to continue with whatever project you are on so we’re going to start with some super internet Basics once upon a time we lived in a world where everything was physical paper clay whatever it was for Millennia we worked in that fashion and along the way we developed systems for keeping track of information file folders by finders pieces of paper ways to index and reference where things were so that we could find what we needed the when we think of the computers we call them digital files and that somehow makes it a little bit more abstract but the reality is those files are in fact physical they’re just so small we can’t see them they’re on chips and those chips are embedded in devices and that’s what we’re using to interact but the idea that we have information to organize is the same as it was when we had literal paper and or whatever that we were using and so when we came up with systems for how are we going to organize our digital information those systems were not created completely from scratch we adapted systems that existed for handling paper and a lot of time when you look at a user interface if you’re on your own computer like you have file folders and it has a little picture of what is a physical folder we’re still referencing those systems and you’re used to organizing files for yourself whether they’re physical or whether they’re your digital ones you have a system of folders that you tuck things into and they nest and whatever the internet works the same way when you have a website you have two essential things doesn’t matter what else you’re going to do doesn’t matter what tool you’re going to use to build on you need two things you need a host and you need a URL a host is the physical space where the files actually live it’s the computer it is a we call it a server um and you’re renting space on somebody’s computer and those fi and your website files are actually living there you have a URL stands for a uniform resource locator and we all use these all the time we type that in to the browser to get to and here I put the West Orlando WP uh address for the web page so that’s our URL the IP address the Internet Protocol that is the location of the server so when you’re getting snail mail you have to have a physical place that’s being sent to and an address that is mapped to that physical Place same concept when we’re talking about an internet your physical place is your host your server and the IP address address is that the uh address is your URL and when you register a URL you there are files that you can put in that map that address to your server we’re not getting into the Weeds on how that works that’s just the overview of how it works so here in this picture we have on the left we have a picture of a server location all these computers right you know Big Air conditioned room I I’ve actually never been in a big server room like this and on the right we have a woman sitting at her desk and typing on her computer and so what’s happening is when she types in that address information goes through the internet to where the server is asks for the files that are comprised that page and then those get sent back to her browser and she can view the page that she requested the files that are being sent from the server to her computer are the content of the page right so that’s images text video Maybe audio files anything that is the actual information that the website is presenting and in addition it’s instructions on how those those different elements appear on the screen what order are they in what color are things U when you press a button what happens all of those instructions the instructions for websites are in different computer languages um there’s five some of these are not exactly languages for th for people who are more advanced I’m going to call them languages for those who are new at this because I think it we don’t want to get into the weeds here on the differences but but we have PHP MySQL HTML CSS and JavaScript are the five languages that are are widely used regardless of what type of Co way that a website is built the foundation is these languages sometimes you’ll hear people talk about the back end of a website and the front end of a website and all of the files regardless of what language they are in are live on the server but the computer that processes them might be the one on the back end and when we talk about front end that means in your browser or on the computer that you’re using to access so th th that is the comp that is where those files are processed and the information displays for you um you don’t need to know any of these languages to build a website with WordPress it is helpful though to understand what each of them are doing especially because of the way that WordPress works now um SQL is a database it’s a relational database there is tables every little piece of information that is in a site is somewhere in a table and those tables are cross referenced in order to know what how things are related to each other and What needs to show up when uh there’s other kinds of database software um but this is a lot of what a lot of hosts use HTML is like an outline for a page U it’s it’s saying this piece of information is a paragraph This is a heading this is an image it’s naming what the object is it’s also when I say an outline it’s it it that’s somewhat literal we a lot of times you might hear the towards semantic HTML it’s sort of like a grammar too so if you have headings headings are numbered there’s an H1 and H2 and H3 and you can think of that just like you were writing an outline for a paper um and that they would be indented at different levels that there is a structure to that and so it’s it’s it’s saying it’s telling you this is the structure of this page that’s what HTML does CSS cascading style sheet tells you how things look it tells you what color things are if they’re indented how big is the font are the corners rounded on that uh image it uh all of those kinds of things anything that has to do with the appearance the CSS is doing that JavaScript is a language of action what happens when you click on a button um is something going to pop up at some point does information need to be moved back and forth between the front end and the back end it’s uh PHP does that too moving information back and forth and referencing what happens when so these are these are the languages and an overview of what they do um I told you some things are processed backend some things are processed in the front end a lot of times you might hear developers call themselves I’m a backend developer I’m a front-end developer and what they’re telling you is which of these categories of code that they’re working with when um they’re they’re building something one of the most common questions that people ask is how do I make my website faster and so here I we again have the picture with the server on the left the woman on the right accessing it and then the arrows back and forth in between at all three of these points impact the speed that your website runs at so on the server side what kind of computers are they using like new equipment old equipment how many files are on any individual computer on the computer where your website lives because when you have a a lot of people use what’s called shared hosting and so many websites not just yours are on the same computer how many total are there how big are any of those how big is your website individually how big are the individual files so all of that impacts the server side um speed then in between those arrows back and forth that’s the internet you know the the wires that are connecting the server to the person who’s who’s accessing your site and that is somewhat outside of your control right how how far are you sending information so here if I have a website that’s here in the US um if I’m sending from a file from Florida to Georgia it’s going to be faster than if I’m sending a file from Florida to Washington State it’s going to be or and that’ll be faster than if I’m sending a file from here to Australia so there is like physical difference physical distance makes a difference in that speed but also and the quality of all of the lines that are in between um and then on the user side uh you have how fast is that person’s individual internet right um the in between we’re talking about sort of the long distances but we do have to think about like the last mile you know the la how it gets right to that person so we all can buy different levels of speed in Internet um and different places depending on where you live you have different ability to do that in addition it matters what kind of computer you’re using and how fast your computer can process information and what browser are you using and how fast can that browser process information so um I just want to cover that because it’s one of the super common questions all right so now we’re going to start talking about WordPress specifically WordPress is a free open-source content management system it was released in 20 I’m sorry 2003 it was a fork of an existing blogging platform and WordPress itself was originally used as a Blog platform we’re going to talk about all of these underlined words free open-source content management system we’re going to talk about them in separately but um when I say it was a fork what that means is there was an existing pile of code that was already a blogging platform and the founders of WordPress took that code and used it as the base for building something else on top of it so that’s what we mean when we say fork and you’ll hear that word sometimes in other contexts around WordPress and it’s important to realize that WordPress was originally a Blog platform because some of the con concepts of WordPress and how it works um and some of the language that people use to talk about it is left over from when it was primarily and only a Blog platform although WordPress is no longer only a Blog platform for something around for 43% of existing websites are built with WordPress as a framework and that includes really big sites including Taylor Swift the White House NASA really really big sites have WordPress as a base so whatever you can imagine with WordPress it’s possible to build it all right so what it what do when I say content management system what are we talking about we were talking about all of these files what a Content management system does is two things it provides a structure on the back end a consistent file structure and a consistent database structure for how files are saved so the good thing about that is if you go from one WordPress site to another to another that file structure is the same and here these first two columns there I have a picture of what the these three files WP admin WP content and WP includes are the three highlevel folders in which everything for your content is saved the second column is the wp admin expanded uh well actually they’re all expanded here so and you can see each of them has specific folders that are in there so every single WordPress site is using this same structure and that helps for consistency to and especially for people who are building sites as a business to know where where things are going to be if they need to troubleshoot or whatever the other thing and and for most of if you’re brand new and you’re not like looking at files in the host you’re never going to see that backend piece but it’s there and it’s providing that structure so the other thing you need with a Content management system is you need a way to get your files into those folders right and what WordPress does what a Content management system does is provides some sort of user interface for doing that and in the user interface you have a way to upload files to create your content to design your layout and so this right hand column here where at front end this is a picture of a screenshot of the menu inside of the dashboard of WordPress this is the basis of the user interface um and we’re going to be going through different pieces of that so I’m not going to talk about what’s on that list but that’s the start of what you’re working with when you’re actually working in WordPress okay what do we mean by open source so open source means that the code is available to the public to view modify and distribute if you wanted all of the code for WordPress and you wanted to go and make your own thing built on it you could 100% do that it’s licensed under what’s called a general public license I have a link in there um and anything that is built on top of you of WordPress is also supposed to be using a general public license we’ll be talk we’ll talk a little bit more about that when we talk about other types of software that you can use to enhance the word WordPress the WordPress Foundation owns all of the trademarks for WordPress and manages the WordPress code updates so although it is a anybody can view and modify and distribute the code for WordPress um there is a process through which code does get reviewed and us and a plan for how to build new features and Implement that and all of that is managed by the WordPress Foundation what do I mean by free so when we talk about free we’re talking about the core WordPress files and all of the functionality that it brings the core content management system you might be able to build a website with just those core files and that’s what I did for five years the first Blog My First blog like I used the core files and a free theme and a couple of free plugins maybe I don’t even remember using that many plugins but I did it for free with all of the core stuff however once you get beyond the core and the more complex your website is is um you’re going to need additional software that additional software is not necessarily made by the WordPress Foundation um there’s many many many people who build software that is I enhances WordPress in some ways and they are thirdparty developers and so the and those are not going to be free in not well some of them will be but excuse me but you can’t assume that they will be um and in addition if you need to hire help if you need somebody to design images for you or if you need somebody to build your website because the functionality you need is not something you have the skill to build then you will um not necessarily be able to get that for free you should assume that you won’t be able to get that for free one of the big things that confuses people when they’re first looking at WordPress is there’s wordpress.org and wordpress.com and it confuses everybody the WordPress content management system that we’ve been talking about was created by Matt Mullen wag and Mike little the WordPress Foundation which owns all the trademarks and uh and and takes care of the code of the content management system was founded by Matt Mel Mullen wag Mt Mullen wag is also the CEO of automatic which is a company that provides a variety of web services and wordpress.com is one of the services of automatic wordpress.org at wordpress.com both you you’re in both cases you’re using the WordPress content management system when you’re on.org though you’re just using the content management system.org means I’m using that content management system but everything else Rel related to the website any hosting your domain registration email any kind of other software that you want to install or tools that you want to use to help build your website that you’re all on your own wordpress.com provides services in addition to just being a using the content management system um there are levels at which some of these services are free and others at which you pay and so you can get website hosting you can get a domain through wordpress.com there is service provider providing the other stuff that you need in order to write um access uh to to create a website and they and you have access to what I’m going to call an opinionated selection of tools whenever I use the word opinionated in this context um I’m talking about people making decisions on how certain things should look and function and so when I say an opinionated selection of tools this means that um I’ve been using the word plugin and I am going to Define that and we’re going to talk about it a little bit more later so let’s just say a package of software there’s these packages of software that you can add additional features or whatever you don’t have access to as many of those wordpress.com curates what you can have available to add to your site all right so what is a theme a theme is when I earlier when when Rob was reading my intro and I I said I threw a theme at it and started writing right so a theme is a collection of files that control the overall appearance of your website a theme um it’ll provide you with a user interface some themes are very opinionated you know when I first started I looked for a theme that had all of the colors that I wanted and the layouts that I wanted and so that I didn’t have to uh build anything um so it was a very opinionated theme um at but at a at the very least they’re providing some sort of in of interface so that you can set your typography and your colors and you can choose layouts they might have templates for you or they might have pages that are already built out in general only one theme can be active on a web a WordPress site at a time um I’ll talk about a little tiny bit of an exception to that in the next slide um so this is that’s what a theme is and what it it does at a basic level you can have a a child theme on your site so with a child theme you inst you have a primary theme that’s installed so I personally use a theme called generate press and there are ways that you can manipulate those files to make changes that are just for this one website that you’re building but you don’t want to make those changes into the theme file that you’ve downloaded and you don’t want to do that because um whenever you update that primary theme that’s something that somebody else wrote and when they update that and change it if you’ve made any changes yourself they will be overwritten so what a child theme does and this next screen this is what it looks like on the back of a website so generate press is here it’s on there but you see how in the bottom LEF hand corner over here of the Greenland creative theme it says active it doesn’t say that generate press is active however it does still have to be installed because this child theme is referencing and incorporating by reference the files from here and then what the child theme is doing is saying except in this case we’re uh we’re going to going to make this be different than what the original them what the primary theme the underlying theme says so that’s what a child theme is doing it’s allowing you to make modifications without having to write an entire theme from scratch you’re just writing this is a change from what what that other file is telling you do this instead all right so what is a page builder page Builders are installed in the same way themes are and sort of fit into that same slot but they provide they tend to provide a lot more than just controls over how things look um a lot of page Builders will provide a user interface which in some cases enhances what the WordPress existing interface is and in other cases it might be an entirely different experience it might bring you to an entirely different screen that is out out that is basically an overlay that over everything that WordPress is doing page Builders tend to include functionality that isn’t necessarily in a theme so most so a theme is not in general going to have a way to create a form for example um but a page builder might have that built into it page Builders are opinionated in the sense that they’re providing you with a workflow and a way we think that it’s going to make it easier for you they’re making decisions about about behind the scenes and providing a different way for you to interact and whether or not any particular page builder is going to work for you might depend on how you’re comfortable interacting with that tool um and if it follows the same sort of logic that your personal brain does um but that’s what a page builder is it’s a it’s a a theme plus so I earlier I used the word plugin a plugin is something that’s providing additional functionality to the website and that’s a really super broad definition because what plugins do is can be all over the place they can add additional functionality to core WordPress they can add additional functionality to your theme they can add additional functionality to another plugin um they might provide a user interface for things that exist but that you might would otherwise have to write code for because so we’re going to talk about what a custom post type is excuse me but WordPress has a way to create custom post types but in order to do it you have to write it in code there’s no user interface that makes it easy to do that but there’s a number of plugins that will make it easy so that you don’t have to write the code it’ll write the code for you plugins are a huge part of what it makes it possible to build a WordPress site without writing code I have a link here to to the WordPress plug-in repository there’s somewhere in the order of 60,000 plugins um and the plugins that are in the repository are those that are available for free a lot of plugins have a premium model so they’ll have a free one and it’ll be in the repository and it’ll offer a certain set of features but then if you want to extend the available features you pay uh for for an add-on to the plug-in this is another thing that comes up a lot so here on the right I is a part of the menu from the dashboard and you see here it says post media Pages comments now remember at the beginning I said it matters a little bit that WordPress was a um a a blogging platform first and the word using the word post is one of the ways that is that is reflect did um with a post it’s a blog post it’s what I’m typing today it’s what I’m publishing today it’s an article um I’m G to write something else tomorrow I’m going to write something else next week and over time I’m accumulating all of those but it’s somewhat ephemeral it’s uh something that there’s going to be new stuff in the posts um a page though is content that’s going to be relatively St static if you’re you might have a list of services your contact form your about page these are things that you might do a occasional updates like maybe you add a new service you got to put something new on that page but for the most part it’s going to be fairly static in the background everything is based on a post and then uh and so pages is a type of a post a media is a type of a post comments are type of a post but we’re calling them different things because they have different functions and we’re storing them in different places in the database they’re stored in separate places um and that’s because we don’t want our about page to show up on our list of blog posts right we need we need them to be separate in terms of how we’re displaying them um and we also are needing a way to keep them organized so whoops my mouse will not a there we go um so this is the different how to think about what is a post and what is a page so we can create custom post types uh the pages and the media just like those we might need have content that we need to keep separate for some reason it’s a new category of posts and you can think of it sort of as a new folder it’s a new set of on a table somewhere why might you use a custom post type well sometimes there’s information that you have maybe you have a lot of content like just using it as an organizational function is a is one way to use custom post types um sometimes you want to display one type of content differently than the other you need a different layout for that type of for a particular type of content you maybe you have content that you have a Blog Page on your site but where do you put things that are not really a Blog not I mean not really a post it’s something you don’t want to show up on your blog post page and it’s not like a permanent page either um there’s kinds of content that live in between and you might if you have a lot of content you might need complex ways to sort filter or search your content so all of these are reasons that you might have a custom post type here I’m giving this is an example so on the left this is the the um menu for the general menu for the dashboard right as you see the post media Pages comments and then it goes on appearance plugins users tools settings on the right this is the Florida tropical Weavers Guild menu and you’ll see that under pages I have workshops mini classes instructors vendors talks Marketplace ads events conferences fiber exhibit entries conference advertisers guilds every single one one of these is a separate po custom post type that I created because we present all of this content in different types of ways and we need um to be able to keep it all organized and be able to template it all right so the next big concept what is a taxonomy my undergraduate degree is in in Natural Science Biology and I grew up watching birds with my dad and so when I of a taxonomy the first thing I always think about is the way that we we categorize organisms so here we have a picture of a bald eagle and on the left we have the taxonomy for the bald eagle I’m not going to read all of this but from the domain at the top Kingdom film as you go down the list um it’s getting more and more specific so the domain is the biggest categorization but then there’s Kingdom so this is a hierarchical uh typog taxonomy here until we get all the way down to the bottom to the species level of what we would nor call a baligo and I’m not going to try to pronounce that Latin because I have no idea how the this is another example of a taxonomy this is a a screenshot from Wikipedia comparing on the leftmost column The Dewy Decimal System and in the second in the middle column is the Library of Congress and on the right is a description of the kind of information that is in there so when I was a kid the library I went to use the Dewey Decimal System I used to know that thing practically by memory um certainly the categories that I looked at a lot um and so I’m giving this example because when we’re trying to classify books and reading material um all of the kinds of things that Li libraries keep track of they’re trying to basically have a system for the ENT all of human knowledge right how do you do that um and that’s what both the Dewey Decimal System and the Library of Congress system are doing is providing references to those so that you know where to find information and that that is is what a taxonomy does WordPress has two default taxonomies categories and tags taxonomies are only available for posts they are not available on pages and you can create your own custom taxonomies just like you can create custom post types and if you have created custom post types you can associate taxonomies with those so this is one of the big tasks of building a website like you the one of the the bottom line goal of a website is that you’re presenting information and all of these tools that we’re talking about the taxonomies and the custom post types are about organ izing that information so that you can present it to whatever story you’re trying to tell whatever uh you need your website to be doing you’re you’re you’re you’re putting the information into a format to do that so these are just tools for doing that so how do you use categories versus tags this is one of those things that I screwed up when I first started um the easiest way to think of it is categories are separating content and tags are connecting content so categories you’re using really big groupings if you are writing a Blog this would be like your pillar content of your I covered these five topics on my website categories are high archical so I put an example here if you have a recipe site appetizer entree drinks dessert like the the what course of the meal is it tags you’re connecting content T so there’s smaller words that might be in multiple different categories but you want but people still need to be able to find them tags are not hierarchical they’re sort of you can think of them in a cloud um or a mind map um for on a recipe site maybe your individual ingredients might be now I gave a couple of examples here but you can also Imagine other examples it it really depends on who you’re what who you’re presenting in information to how you use this and what you want them to find because I didn’t for example we’re talking about a rep a recipe site here you could have types of quinine Indian Italian Chinese right that would be another type of taxonomy and maybe if you were doing a recipe site you might want to create a custom one and it would apply across various things it’s just thinking about how to break down information what is the classic editor and what is the block editor editor the editor is the part of the WordPress interface where you actually create your individual posts and pages so here I’m showing the menu if I where I’ve clicked on the word post and it pops up a side menu and one of those is add new post so the editor is the part of WordPress interface I get to when I click on that add new post uh section of the menu this is what the classic editor looks like the classic editor was the default WordPress editing experience for many years until the block editor launched in 2018 and on the left is a picture of what it looked like you can see you have in the middle here you have this big block where you can type and at the top of it this says we’re going to type a paragraph This is bold italic like you these controls here look like a word processor and that’s always how I thought of of interacting with WordPress it was um so it was really easy and intuitive for me when I first started writing even though I didn’t know anything about the internet or anything about code I had used lots of word processors and this worked the same as those um this whole thing here this interface this editor um called tiny MCE oops actually accidentally clicked the next slide but it’s okay I was about to anyway this is what the block editor looks like and I call the block editor visual HTML with a CSS user interface and so at the beginning of this I I told you what HTML is doing is providing an outline and a structure and what CSS is doing is telling you how something’s going to look so when you are actually building in it over here on the left I’ve opened up the block menu and you can see I have generate blocks here this is not a core function this is a a plugin but here under the text section these are core blocks that are come with WordPress so you can see they have names that go with them if if a paragraph a heading a list these are all HTML so if I put that onto my screen um and the two screens on the right the two screenshots on the right the one on top is generate blocks and the one on the bottom is the core WordPress but it’s a heading in both cases an H2 level heading and the reason that I’m putting them both here is because now if you look over here on the right hand side this is what what I call the CSS user interface because this is where I can set the colors this is where I can set spacing um all of the anything that has to do with the appearance of what I need this headline to look at is over here in this right hand margin and you can see that with uh generate press compared to the core they are presented a little bit differently um with the core block if I click on uh some of these if I were to click on on these menus here these three little dots it gives me additional options too they’re not um available to me on first glance like they are with generate blocks but the setting and I haven’t really EXP Ed any of these out the settings within each of them are going to be different depending on what you are um which you’re using so the cont the the level of controls that you have access to changes depending on whether you’re using core versus other blocks but it’s the same thing over here on the right we’re essent is the interface to write you CSS without needing to know how to write CSS and over here on the left we’re writing HTML without having to know how to write HTML all right and this is one of this is the home P well not the home page but it’s the main conference landing page for the at Florida tropical Weavers Guild conference um over here on the left I’ve expanded the outline so you can see exactly what’s happening here in terms of what blocks I have used in order to build this site and so each of these like a container is going to build a certain type of HTML um I have my outline over here my this is telling me what did what did you do what does everything mean over here um I don’t have the Block Level open over here you’re seeing controls for the whole page here not for individual blocks but I wanted you to see mostly over here on the left how it’s expanded out and you have an an outline of the page to understand a little bit better about what’s happening and how you’re build it okay what is Gutenberg this confuses a lot of people be the the block editor was released in 2018 it was in progress of being built for I don’t know how long before that and so before it was released the code name for it was Gutenberg and so a lot of people use glutenberg and the block editor interchangeably however at this point in time you know almost six years on from when it was first released the block editor and Gutenberg are not the same thing um Gutenberg now is a plugin that includes experimental features for the block editor you can try it it’s if you want to see what’s upcoming what they plan to do you can install that on a site um wouldn’t necessarily I wouldn’t suggest putting that on a site that is um something that’s live that you want to make sure it’s functional put it on a site that you can experiment on but a lot of people do use Gutenberg to mean the block editor in general but at this point in time it’s better to not do that because it uh the block editor is with a stable current release and Gutenberg is the experimental features what are patterns so on the site when I showed you the back of fwg you know there’s a lot of different blocks going on there and because that page is the landing page for a conference and some of those pieces of information need to be on other Pages too I can create patterns that are groups of blocks that I if I want to use them multiple times on my site might be on the same page sometimes I’ll use the same one on the the same block on the same page multiple times I’ll show you an example of that in a minute sometimes it might be on different pages patterns can be synced or unsynced which means a synced pattern is one where every time you see it on the website it’s exactly the same content and appearance and with unsynced you you start with something that’s the same but then you make changes to it and those changes don’t sync across every use of it I WordPress has announced that they will at some point in the future have partially synced patterns and I believe I just within the since I created this slide heard that it is in it’s in the Gutenberg plug-in now and may be released in the next major release of WordPress which will be in July these are two examples of of patterns so sync patterns exact same design exact same content this is from the page I just showed you so I have these set of three buttons every single place that this appears on the site I need those three buttons to do exactly the same thing they’re linking to the exact same places and it needs to be consistent every single time so this is an so this is why I use the sync pattern if you look over here on the left this is that same page that I showed you this right here says 2024 registration buttons every single time that this appears on that page I’m using that pattern of those three buttons grouped together all the same on the right hand side I’m showing you an example of something that is an unsynced pattern so this blue bar with an H2 heading in it as a label for a section of the page every time I use that I want that black that blue bar I want it to be go across the width of the page I want it to be the same height all of those kinds of things I want it to look the same but the content’s going to change um I because I need a different name for the next section right not everything is called schedule and so in that case I use an unsynced pattern this is a really great example of where a partially synced pattern would be fantastic because with a partially synced pattern um I could connect it and it would be connected with the design but not with the content so the problem with unsynced patterns is let’s say rather than These Bars being this teal color they decide they want these bars these H2 headings to be um like the hot pink that hot pink is uh I would have to then find every single instance that that pattern was used and change it manually so that would be a good place for a partially synced pattern so that the color would if I wanted to change the color it would change them across all of them but it wouldn’t change like the heading title schedule uh what are templates templates are I think of them the best way to think of them is if you’ve ever done a mail merge in a word processing you have a letter that you need to send and you need to send it to a 100 people and you want the it to say Dear Mr aa’s last name um but you don’t want to have to type that last name you know individually a 100 times on each letter and save them and blah blah blah blah blah so instead you create a list and then you merge those two things together and that’s what a template is on a website you have your page layout in one place and your content in a separate place and you merge those two things together different types of content can use different templates and there are default templates that are built in so when you’re first starting you don’t necessarily have to think about this at all WordPress Andor your theme include default templates um but you can make your own if you need to um one place where you might need to is your um if you have a custom post type so this is an example this site has 52 instructors on it on the left is what a single instructor page looks like when you visit the page and on the right is what that page looks like in the editor now you’ll see there’s no um I have the name of Jennifer Williams Williams comma Jennifer and under that there’s nothing it says type SL choose a block there’s no content there everything is like in a form well that’s because those form that information in that form is being merged into the template that is exists in another place so I don’t have to I it means that there’s consistent layout and consistent design but I don’t have to build each page individually and remember how to do the design for each individual thing what is full site editing site editing is a set of new WordPress features that help us build and edit all parts of our website using blocks there’s a site editor Global Styles block themes patterns and theme. Json this is specifically about WordPress core and how the future of how WordPress is evolving um there a lot of the what they’re talking about here is available if in other themes if you’re purchasing or a a theme to use so um but what they’re talking about here is the way that core is evolving the difference between a classic theme and a block theme confused me for a long time and that part of that is because like generate press which I’m using has um I use blocks in it but it’s considered a classic theme and the reason it’s considered a classic theme is because they are coded differently I’m not even going to try to get into the Weeds on that because I don’t think because I don’t understand it well enough to explain it but they are coded differently and they have different user interfaces in terms of where you find things in order to develop your site this is generate press example of a classic theme and you see over on the left I said I have customized highlighted and the uh interface that I get that when I click on customize is in on the other picture on the right hand side and you can see there’s like colors and typography and other kinds of information that I’m can do there with a block theme that no longer appears I don’t have the customizer anymore it’s called an editor and then over on the right hand side is what that interface looks like so the navigation the Styles the pages the templates the patterns are all there in a different kind of an interface the um template parts are a a term that’s used in full sight editing and they T they are the head header footer some post meta sidebar they’re patterns but they’re patterns that are used more generally they’re things that you’re going to use across the entire site in all likelihood and not just on an individual page or here and there takeaways WordPress is infinitely extensible you can do whatever you need you need to think about how long will it take how much will it cost there’s always going to be more than one way to create content next steps I’m going to skip well no actually I’ll do this part I’m going to skip a couple of things at the end of this I have a list of some resources here um we will you’ll obviously be able to see this in the video and we will um also have this on the website we have a list of resources on the website the WordPress has a YouTube channel and they also have learn WordPress which has courses that you can work through yourself and then I have in here in my slides a couple of things that are addressing what Plugin or theme should I use but I’m going to skip those they will be in the slides that you’ll be able to have access to later um but we can take questions

Rob Watson:

thank you Karen this is a very informative presentation I’m sure it’ll help a lot of people just getting their feet wet and it helped me to remember some things too so thanks for your time [Music]