{"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":"2025-05-15T18:50:31","modified_gmt":"2025-05-15T18:50:31","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
\"\"<\/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 (right where it says “Start writing or type \/ to choose a block”). When you start typing, you should see some options pop up at the top of the text box, like this:<\/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>. 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>. You could either select “Insert After” from the dropdown list above, or simply press return\/enter on your keyboard.3<\/a><\/p>\n\n\n\n

Type some additional text into that new block. By default, WordPress has given you another paragraph block. 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 click the dots next to the arrows to drag 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

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. As you explore WordPress, you’ll learn that there are usually a few different ways to reach the same goal. One way to add an image is to hit return to start a new block and then click the plus sign to the right. You’ll see a few common block types to the right of the block, including a heading, image, and gallery. Click image. <\/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. 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, edit 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. These setting 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. We can also make changes to the image size\/dimensions, and even add a circle mask if we want to (click “Style” to try out the mask). <\/p>\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. 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 permanent alt text, a caption\u2014 even the option to edit the image. <\/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 an 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 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> is actually your homepage for your WordPress site, just like index.html<\/code> was the homepage for your earlier projects.5<\/a> 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 has saved 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. The second point is that you should be starting to see just how much WordPress simplifies the process of front-end web development. 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.”<\/p>\n\n\n\n

\"\"<\/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 are the three most recent. As you might expect, the active theme for your site is the most recent: Twenty Twenty-One. <\/p>\n\n\n\n

You can test out one of the other installed themes by hovering over it and pressing “Live Preview.” This is a great way to get a quick look at how your site will change if you change the theme. If you decided that you liked the new theme and wanted to activate it, just click “Activate and Publish” in the top left corner. <\/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. Themes might come with certain widgets<\/a> preinstalled, require certain plugins<\/a>, or have specific menu<\/a> options predefined. This isn’t something that we need to worry too much about while we’re working on our WordPress playground, but it’s a good thing to be aware of. In fact, as you explore a few different themes, pay extra attention to the differences that you’ll note in the themes menu. <\/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. There are four preinstalled themes for you to investigate, but those aren’t the only options that you have. <\/p>\n\n\n\n

Back in the main theme page, click “Add New Theme<\/strong>.” You should see fifteen additional “Featured” themes that you can experiment with\u2014 but, if you click “Popular” or “Latest” you’ll have access to thousands of different 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

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>. 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! 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. I 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. Play around with Widgets and different layouts to get a feel for what you can do.<\/p>\n\n\n\n

Style Editor:<\/strong> <\/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, Paragraph text, 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 (Hint: It\u2019s not all in the same spot.)<\/p>\n\n\n\n

    Templates<\/strong>: Figure out how to apply different templates to your pages. Troubleshoot the limitations of applying templates based on your Theme or Reading settings.<\/p>\n\n\n\n

    Test out a few different themes and find one that you like besides the default Twenty Twenty-Five theme. In order to get the hang of WordPress you need to poke around and build things and break them and build them again. 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. This is due to the way WordPress stores data on your server. If you try to drag and drop a WordPress site you will break it and lose all your work. ? 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":7,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1856\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1856\/revisions\/6077"}],"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}]}}