{"id":1856,"date":"2020-03-15T21:54:52","date_gmt":"2020-03-16T01:54:52","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1856"},"modified":"2026-10-15T13:24:23","modified_gmt":"2026-10-15T13:24:23","slug":"wordpress-playground","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/wordpress-playground\/","title":{"rendered":"WordPress Playground"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

As you dig into WordPress you’ll find that there’s a lot to explore! This exercise is designed to provide you with an introductory tour of WordPress as a spring board for your own discovery. <\/p>\n\n\n\n

Throughout the semester we’ve stressed that the best way to get familiar with new technology is to play around with it. WordPress is no exception! Follow along with the steps below, but feel free to detour to do some exploring on your own. <\/p>\n\n\n\n

Before we get started…<\/h2>\n\n\n\n

Before we jump into our WordPress Playground exercise, make sure you’ve spent some time reading our Intro to WordPress<\/strong><\/a> lesson. This will help you get the lay of the land before your dig in. <\/p>\n\n\n\n

Next, you’ll need to make sure that you’ve completed the WordPress Starter<\/strong> Steps<\/strong><\/a> lesson. This will walk you through installing WordPress on your server and is a necessary first step! <\/p>\n\n\n\n

Your WordPress dashboard<\/h2>\n\n\n\n

All right! The first thing we are going to do is log in to our WordPress account. To do that, you’ll simply type the URL of your WordPress installation in a Google Chrome browsers window and enter wp-admin<\/code> at the end. Here’s an example: <\/p>\n\n\n\n

www.YourDomain.com\/playground\/wp-admin<\/strong><\/code><\/p>\n\n\n\n

Keep in mind that your WordPress installation might be installed in a slightly different location<\/strong> depending on what directory you used during the WordPress Starter Steps. If you’re really stuck here and can’t remember where you installed WordPress, you can log in to your cPanel on Reclaim Hosting, click the WordPress icon, and then click “My Applications” in the Installatron view. That will take you to a page with both the URL of your WordPress install and a the URL of your admin page. Click the link with wp-admin<\/code> at the end to access your dashboard. <\/p>\n\n\n\n

\"\"
The URL for your WordPress installation and the URL to the admin dashboard (indicated by “wp-admin.”<\/figcaption><\/figure>\n\n\n\n

Okay, now that you have navigated to your WordPress dashboard, we want to point out a couple of handy things. <\/p>\n\n\n\n

The first is the black bar that stretches across the top of your screen. When you see this bar you know you’re logged in. The second in the dashboard menu along the left side of the screen. We’ll want to fully explore that menu, but right now we’re going to concentrate on the link for “Pages.” <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Exploring your home page<\/h2>\n\n\n\n

Click on the Pages link on the left side of your dashboard menu. When you completed the WordPress Starter Steps<\/a> you created two new pages: a Home page, and a Blog page.1<\/a><\/p>\n\n\n\n

Hover over the Home page and click “Edit.”<\/p>\n\n\n\n

\"Screen
Hover over the home page and then click “Edit.”<\/figcaption><\/figure>\n\n\n\n
\"\"
Your Home page might look a little less… green if you are using a newer version of WordPress. Don’t worry about that! <\/figcaption><\/figure>\n\n\n\n

A few things to note at this point! If we right click the three dots at the top right of the screen we will have the option to uncheck “Fullscreen mode,” which will allow us to see the menu while we work. If you click “View Page<\/strong>” and open it in a new tab, we’ll get a live view of what the page will look like to an outside user. <\/p>\n\n\n\n

To see any changes we’ll need to make sure to publish\/update the page <\/strong>we are editing and then refresh<\/strong> the live page. It’s handy to have both the editable page and the live page open at the same time so you can check your progress. 2<\/a> <\/p>\n\n\n\n

\"\"
You can view a live version of your page by clicking “View Page.”<\/figcaption><\/figure>\n\n\n\n

Block Editor<\/h2>\n\n\n\n

Okay, now we’re going to play around with WordPress’s block editor. You can (and should!) read more about the block editor<\/a> here, but for now, it’s enough to know that we can add all sorts of content to our WordPress page using blocks. <\/p>\n\n\n\n

Go ahead and type some text into the first block (you may see a prompt that says “Type \/ to choose a block,” or you can click directly into the page to start writing). When you start typing, select the paragraph block to reveal its toolbar. Depending on your editor settings, the toolbar may appear directly above the block or at the top of the editor.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Notice that symbol that looks like a fancy backwards “P”? That symbol is actually called a pilcrow<\/a> and is commonly used by editors to denote a new paragraph! The pilcrow tells us that we’re using a paragraph block<\/strong>. <\/p>\n\n\n\n

If you click the pilcrow symbol you’ll see that you can transform the block into a heading, list, or all sorts of things. You should also notice that from here we can easily set the alignment of the paragraph, bold the text, italicize, add a hyperlink, and more.<\/p>\n\n\n\n

In fact, if we click the three dots at the end of the toolbar, even more options become available to us. <\/p>\n\n\n\n

\"\"
Note! See remove block at the bottom of the list? That’s how you delete an unwanted block.<\/figcaption><\/figure>\n\n\n\n

These options are pretty self explanatory, but it’s really good to know where to find them! The “Remove Block<\/strong>” option at the bottom of the list is sure to come in handy when you want to get rid of a block. <\/p>\n\n\n\n

Okay, let’s add another block<\/strong>. The easiest way is to press Return\/Enter at the end of your paragraph. You can also click the + button (Block Inserter) to choose a specific type of block. 3<\/a><\/p>\n\n\n\n

Type some additional text into that new block. By default, WordPress has given you another paragraph block. <\/p>\n\n\n\n

We should also notice that some arrows have appeared on our toolbar. We can easily move the block up or down in the vertical block stack by clicking those arrows, or we can use the drag handle next to the arrows to move the block to a new location.<\/p>\n\n\n\n

\"\"
Change the order of the blocks by dragging it or moving it up or down with the arrows.<\/figcaption><\/figure>\n\n\n\n

Try playing around with the arrows for a few seconds to get a feel for them. Then, go ahead and change your top block from a paragraph to a <h2><\/code> heading.4<\/a> The font for your new heading should have increased in size and weight. <\/p>\n\n\n\n

One more useful tool before we move on: look for the List View button near the upper-left corner of the editor. It opens a panel showing all the blocks on your page. Try selecting and rearranging your blocks from List View. This becomes especially helpful when you’re working with more complicated layouts or blocks nested inside other blocks.<\/p>\n\n\n\n

Adding an Image<\/h2>\n\n\n\n

Next we’re going to add one more block, but this time we will make it an image block. <\/p>\n\n\n\n

As you explore WordPress, you’ll learn that there are usually a few different ways to reach the same goal. To add an image, click the + button to open the Block Inserter. Search for “Image” and select the Image block. You can also type \/image<\/code> in an empty paragraph block and select Image from the suggestions.<\/p>\n\n\n\n

\"\"
An easy way to add an image.<\/figcaption><\/figure>\n\n\n\n

It’s incredibly easy to add an image to our page with WordPress! All we need to do is find an image. <\/p>\n\n\n\n

Let’s visit our favorite place for free images, Unsplash<\/a>, and download any image that’s calling your name. Remember what we learned earlier in the semester about optimizing images for the web. Before uploading, make sure your image dimensions and file size are appropriate for your website.<\/p>\n\n\n\n

Once you’ve got an image downloaded to your computer click Upload, and select your image.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’s really as easy as that! Again, at the top of the image block you’ll see some options to align the photo, crop or replace the image, add a hyperlink, etc.<\/p>\n\n\n\n

\"\"
Style the image directly in the block editor!<\/figcaption><\/figure>\n\n\n\n

You probably have also noticed that there are a few more settings you can play around with on the right side of your screen. <\/p>\n\n\n\n

These settings will change depending on what type of block you’re working with and let you change some basic styles of your elements. For an image, we can (and should!) add alt text. If the image communicates information, write a short description that conveys its meaning or purpose. If the image is purely decorative, you can mark it as decorative instead.<\/p>\n\n\n\n

We can also make changes to the image size and dimensions, as well as explore additional styling options in the block settings on the right side of the screen. Depending on your theme, you may also see options for adding a border, rounding the corners, or applying other visual styles to your image.<\/p>\n\n\n\n

If you don’t see the settings panel on the right, click the Settings icon near the upper-right corner of the editor.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Media Library<\/h2>\n\n\n\n

One of the great perks of using a CMS like WordPress is the way it manages and organizes all of the images and other media that we integrate into our website. <\/p>\n\n\n\n

To give you a better idea of what’s going on behind the scenes save your work by clicking “Update” (or Publish) in the upper right corner of your screen, and then click Media<\/strong> and then Library<\/strong> in the dashboard at the left of your screen.<\/p>\n\n\n\n

\"\"
The Media Library<\/figcaption><\/figure>\n\n\n\n

You’ll notice the image that you just downloaded is already saved in the media library for your site. WordPress automatically added it for you. If you click on the image you’ll see some additional information and options, including a place to add default alt text, a caption, and other attachment details.<\/p>\n\n\n\n

\"\"
Attachment details for items in the Media Library<\/figcaption><\/figure>\n\n\n\n

The Media Library is a great tool, because every image (or other form of media) that you upload to your site is saved and available for reuse. If you wanted to add another image block with the same picture of a sleepy kitten, all you would have to do is select Media Library<\/strong> when WordPress prompts you.<\/p>\n\n\n\n

\"\"
To reuse an image select Media Library. <\/figcaption><\/figure>\n\n\n\n

What about my server?<\/h2>\n\n\n\n

At this point, you might reasonably wonder: What about my server? Don’t I have to upload the images to my server too? <\/p>\n\n\n\n

WordPress actually does this for you so you don’t have to worry about it! Let’s take a quick detour to prove it. You can follow along with these steps if you like, or just observe this bit. <\/p>\n\n\n\n

First, I’m going to open Cyberduck and navigate to the folder that I created when installing the WordPress playground. I’ll click the playground<\/code> folder to see all the files and folders that were added to my server when I installed WordPress. It’s a lot, right?<\/p>\n\n\n\n

\"\"
Your WordPress install when viewed from your server<\/figcaption><\/figure>\n\n\n\n

There’s a lot going on here and we don’t need to get too into the weeds. One interesting thing to note is that index.php<\/code> plays an important role in how WordPress handles requests for your website. Unlike the static index.html<\/code> files we created earlier, WordPress uses PHP, templates, and a database to generate pages dynamically. 5<\/a> <\/p>\n\n\n\n

What we’re actually going to look at though is the wp-content<\/code> folder.<\/p>\n\n\n\n

When we click into the wp-content<\/code> folder we can go to uploads<\/code>, then 2021<\/code>, then 06<\/code>.6<\/a> Inside the 06<\/code> folder we’ll see the photo that we uploaded. In fact, we’ll see that not only is the original image saved, but WordPress may have generated several resized versions of the same image if we should need them.<\/p>\n\n\n\n

\"\"
WordPress has uploaded multiple versions of your image to your server<\/figcaption><\/figure>\n\n\n\n

This quick server detour should illustrate two points. First, we’re not abandoning the processes we learned earlier in the semester; all our files and folders still need to be uploaded to our server in order to be accessible to folks browsing the internet. <\/p>\n\n\n\n

The second point is that you should be starting to see just how much WordPress simplifies the process of front-end web development. <\/p>\n\n\n\n

When you’re working on a WordPress site, you’ll never have to upload files to your server manually; WordPress will take care of all of that for you behind the scenes. No wonder it’s so popular!<\/p>\n\n\n\n

Next up, we are going to take a very quick look at WordPress themes! <\/p>\n\n\n\n

Themes<\/h2>\n\n\n\n

You’ve already had some experience with themes during our Bootstrap module, but it’s time to revisit them in WordPress. The rules we previously discussed are still important\u2014 in fact, they even more important, so please take a few moments to refresh yourself<\/a>. <\/p>\n\n\n\n

Head back to your WordPress dashboard and click “Appearance” and then “Themes.”
Here you’ll see the themes currently installed on your WordPress site. One theme will be labeled Active. That’s the theme your site is currently using. You may also see a few other themes that were installed automatically when you set up WordPress.<\/p>\n\n\n\n

Before we start trying on themes, there’s one important distinction to understand. WordPress has two main types of themes: classic themes and block themes.<\/p>\n\n\n\n

Classic themes use an older approach to customization, often relying on the Customizer, traditional menus, and widget areas. Block themes are designed to work with WordPress’s newer Site Editor, which lets you customize nearly every part of your website using blocks, including your header, footer, navigation, templates, and site-wide styles.<\/p>\n\n\n\n

For this class, we’ll primarily work with block themes because they give us access to the Site Editor and the tools we’ll explore in upcoming lessons.
<\/p>\n\n\n\n

\"\"
Themes representing Twenty-Twenty-One, and earlier. You will see more recent themes! <\/figcaption><\/figure>\n\n\n\n

You’ll likely see three default themes that have already been installed for you. Each year WordPress comes out with a new default theme and what you’re seeing is the most recent. <\/p>\n\n\n\n

Let’s try out a different theme! From the Themes screen, click Add Theme or Add New Theme. You’ll be taken to the WordPress theme directory, where you can browse thousands of free themes.<\/p>\n\n\n\n

Look for the Block Themes filter or category to narrow your results to themes that support the Site Editor. Browse the available options and find a theme that interests you.<\/p>\n\n\n\n

Click on a theme to learn more about it or preview its design. When you’re ready to try it on your own site, click Install. Once installation is complete, click Activate to make it your site’s active theme.<\/p>\n\n\n\n

Now visit your website in a separate browser tab and take a look at what changed! You might notice differences in typography, colors, spacing, navigation, and the overall layout of your pages.<\/p>\n\n\n\n

\"\"
Click Activate and Publish to switch to a new theme<\/figcaption><\/figure>\n\n\n\n

A few important notes before we fall too deeply into the theme rabbit hole. In WordPress themes actually have a much bigger impact on the functionality<\/strong> of the site than they do with Bootstrap. <\/p>\n\n\n\n

Themes can influence not only how your site looks, but also which customization tools are available. Some themes include different templates, patterns, and style variations. Others may recommend additional plugins or page-building tools.<\/p>\n\n\n\n

Let’s take a quick peek at one of the most useful features of a block theme: the Site Editor.<\/p>\n\n\n\n

Return to your WordPress dashboard and navigate to Appearance \u2192 Editor. This opens the Site Editor, where you can explore and customize the overall design and structure of your website.<\/p>\n\n\n\n

Depending on your theme, you’ll find options for working with Navigation, Styles, Pages, Templates, and Patterns. You don’t need to master these tools just yet. We’ll spend more time with them in upcoming lessons. For now, take a few minutes to explore what is available.<\/p>\n\n\n\n

Pay particular attention to Styles. This is where you can experiment with your site’s typography, colors, and other design settings without editing each individual page.<\/p>\n\n\n\n

\"\"
Each theme has different functionality<\/figcaption><\/figure>\n\n\n\n

As part of the playground assignment you should spend some time trying on different themes. <\/p>\n\n\n\n

Try installing and activating at least one more block theme. Notice how the available templates, patterns, and style options change when you switch themes.<\/p>\n\n\n\n

\"\"
There are thousand of free WordPress themes.<\/figcaption><\/figure>\n\n\n\n

There’s a lot to explore with WordPress themes and the point of the Playground assignment is to try out a few different themes and start to evaluate how they function. There’s a wide range in the quality of these free themes so it’s a good idea to think critically about ratings and functionality. Also, be aware that some themes will reference page builders like Elementor, Divi, and others. As we discussed in shopping for a theme<\/a>, page builders or other tools that mimic WordPress’s core functionality are best avoided in the context of this class. <\/p>\n\n\n\n

One final reminder: changing your theme doesn’t ordinarily delete the pages and posts you’ve created, but it can significantly change how that content appears. Some layouts and theme-specific features may not transfer neatly between themes. That’s another good reason to experiment now, while we’re working on a low-stakes practice site!<\/p>\n\n\n\n

To try out a new theme from the theme library you’ll have to first install it7<\/a>when it’s installed you can do a live preview8<\/a> and then activate it. <\/p>\n\n\n\n

Okay! That’s a lot of ground that we covered! What’s next?<\/p>\n\n\n\n

Your mission\u2026<\/h2>\n\n\n\n

By now, you\u2019re starting to see how powerful of a tool WordPress can be, but fully utilizing WP\u2019s functionality takes practice<\/em>.<\/p>\n\n\n\n

Spend some time on your own exploring WordPress and building out a low-stakes website that gives you a chance to learn about WordPress’s interface and functionality.<\/p>\n\n\n\n

This is a practice site<\/strong>, not a project, so spending your time exploring! <\/p>\n\n\n\n

As we move through lessons in class, test out what you\u2019re reading and learning in your Playground. Keep exploring the Dashboard, the Block Editor, and the Site Editor. The checklist below includes really common actions you\u2019ll do when you\u2019re building a WordPress site.\u00a0I strongly<\/em> recommend working through this checklist because it will get you familiar with the action steps you’ll take to complete Project 3.<\/p>\n\n\n\n

Exploration Checklist<\/strong><\/h3>\n\n\n\n

Pages<\/strong>: Design and layout 2 pages \u2013 for example, your Home and About pages, using 3-4 Blocks and a pattern or two.<\/p>\n\n\n\n

Posts<\/strong>: Build or recreate a news article\/blog post with images, text, and either video or audio. Experiment with layout blocks such as Columns, Group, or Media & Text to see how you can arrange different types of content.<\/p>\n\n\n\n

Style Editor:<\/strong> <\/p>\n\n\n\n

Make sure you’re using a block theme so you can access the Site Editor under Appearance \u2192 Editor. From there, select Styles to explore your site’s design settings.<\/p>\n\n\n\n

    \n
  1. Change the background color of your site.<\/li>\n\n\n\n
  2. Customize the text for your Headers, Paragraphs, and Links.<\/li>\n<\/ol>\n\n\n\n

    Block Editor<\/strong>: Dig into a type of block, e.g., a Button, a Pull Quote, and manipulate its styling.<\/p>\n\n\n\n

    Navigation<\/strong>: Identify where and how to edit your navigation bar links and styling With a block theme, you can manage menus through Appearance \u2192 Editor \u2192 Navigation. You can also customize the appearance of a Navigation block within a template or template part.<\/p>\n\n\n\n

    Templates<\/strong>: Figure out how to apply different templates to your pages. Explore the available templates under Appearance \u2192 Editor \u2192 Templates, and try changing the template assigned to a page. Pay attention to how templates affect your site’s layout and how changes to a shared template can affect multiple pages.<\/p>\n\n\n\n

    Themes: <\/strong>Test out at least two different block themes and choose one that you like. Notice how the available templates, patterns, and styling options differ between themes.<\/p>\n\n\n\n

    In order to get the hang of WordPress you need to poke around and build things and break them and build them again. <\/p>\n\n\n\n

    Once you feel like you know your way around WordPress a bit better make sure to save your work and hit publish!<\/p>\n\n\n\n

    One thing to be careful about that is worth mentioning: you cannot move a WordPress site around on your server by dragging it and dropping it like you could with earlier projects. That’s because a WordPress website consists of both files and a database. Moving only the files doesn’t move the content and settings stored in the database, and WordPress also relies on URLs and configuration settings that may need to be updated when a site moves.<\/p>\n\n\n\n

    If you need to move your WordPress site to a new location, you’ll need to use a proper WordPress migration process rather than simply dragging and dropping folders. For this reason, it’s a VERY GOOD IDEA to save a local backup of your WordPress site<\/a> after you spend any significant time working on it. Seriously!<\/p>\n

    1. If you haven’t created those pages yet, check out Step 7 in the Starter Steps <\/a>to make them!↩<\/a><\/p><\/li>

    2. There’s also a preview function that you can use, but sometimes it can get a little glitchy when you’re working with specific themes.↩<\/a><\/p><\/li>

    3. you could also click the plus sign that appears in the bottom center of the existing block when you hover over it\u2014 WordPress gives us lots of ways to reach out goal!↩<\/a><\/p><\/li>

    4. Use the dropdown next to the paragraph symbol and select “heading.↩<\/a><\/p><\/li>

    5. You can learn a bit of introductory information about PHP back in the WordPress intro reading<\/a>↩<\/a><\/p><\/li>

    6. WordPress organizes our uploads by year and month!↩<\/a><\/p><\/li>

    7. ↩<\/a><\/p><\/li>

    8. ↩<\/a><\/p><\/li><\/ol><\/div>","protected":false},"excerpt":{"rendered":"

      As you dig into WordPress you’ll find that there’s a lot to explore! This exercise is designed to provide you with an introductory tour of WordPress as a spring board for your own discovery. Throughout the semester we’ve stressed that the best way to get familiar with new technology is to play around with it. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1856","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=1856"}],"version-history":[{"count":10,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1856\/revisions"}],"predecessor-version":[{"id":6717,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1856\/revisions\/6717"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=1856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}