Select Page
Web Design I
Class 13: WordPress CSS

Topics

    • WordPress CSS
    • Subpages
    • Menus
    • Week 13 CMS Site (subpages) Lab

Class 13 is a killer

Slide01
PlayPlay
Slide02
PlayPlay
Slide03
PlayPlay
Slide04
PlayPlay
Slide05

WordPress CSS

Two Methods

It is possible to add your own CSS to your wordpress pages and site as a whole. Both methods are discussed below.

Additional CSS

You may use Customize to apply Additional CSS. It works much of the same way you employ CSS on a hard-coded HTML sheet.

Create CSS rules that apply to the specific HTML elements.

It may be difficult to find what HTML selector you need in order to make a change. Lucky you there are developer tools built into most web browsers. In Mozilla Firefox, in the Menu select Web Developer > Inspector.

Theme Editor

In the Dashboard navigate to Appearance>Theme Editor to access your theme’s CSS. Here you can write your own default CSS rules. Just be aware that when the theme is updated it will overwrite your CSS!

Subpages

Subpages

Creating subpages are as easy as a click in WordPress. In the Dashboard navigate to Pages>New.

Personally I like to duplicate pages so I have a starting point in case I want to keep anything from a previous page. First be sure you have a plugin that allows you to duplicate a page such as Duplicate Post. In the Dashboard navigate to Pages. In the Pages section hover over the page you wish to duplicate and you should see a new option to “clone,” “duplicate,” or whatever the plugin calls it. When clicked it will make a copy of your page. From there you can open it and start your page.

Menu

Menu

WordPress will automatically generate a menu at the top of the site using whatever pages you have created. This obviously lacks deliberate control so it is best to create your own and designate pages.

In the Dashboard, navigate to Appearance>Menus to create a menu. From there you can add pages, posts, and custom links to a menu and save it. Depending on your theme you may apply your menu to the heading, footer, or other area. This is a very flexible system.

Week 13 CMS Site (subpage) Lab

CMS Site (subpage) Lab

The homepage is complete. Next are the subpages. You will create layouts for each, add content, and apply custom CSS where applicable.

You will be graded on the following:
  • Layout:
    • Sections of content are organized.
    • Strong grid design utilized.
  • Content:
    • Well-written text with no grammar mistakes.
    • Images scaled, and adjusted for the page.
    • Interactive dynamic content included.
  • Custom CSS:
    • CSS rules are utilized to customize the design of the site.
  • Aesthetic:
    • Appealing design with professional craftsmanship throughout.
Resources:
Assignment Video Tutorials
You may watch the video tutorials below
Assignment Lab Materials
None

Lab Tutorial Slideshow

This tutorial will guide you through the process of creating subpages in WordPress

Lab Introduction
CMS Site (subpages) Lab
PlayPlay
Introduction

Quite a bit has been completed on the site. The necessary software has been installed. The general settings have been applied. The last thing we did was complete the homepage. In this lab we will create two subpages and complete the site.

Click on the > to start

You may use your lab from last the last lab as the starting point.

Subpage Creation
Subpage Creation
CMS Site (subpages) Lab
PlayPlay
Clone the Homepage
Instructions
  1. You have a homepage but no subpages. Much like when we hard-code sites we will duplicate the homepage to make the subpages so we don't have to start from scratch.
  2. Open Local.
  3. Click on your site name. Press START SITE on the top right to make the site "live".
  4. Press on Admin. The browser will open to the admin login page. Log in (should be vcp and vcp).
  5. Click on Pages in the Dashboard.
  6. In the pages section, hover over the Homepage. Press Clone from the menu that appears below it. This will create a duplicate of the Homepage (this option is available because we installed the Yoast Duplicate Post plugin).
  7. Hover over one the duplicate page and select Quick Edit. Enter "Contact Us" in the Title field. Change the Status from Draft to Published. Once completed press Update.
  8. We have now created one subpages but it will need to be formatted so it is not the same as the homepage.
  9. Hover over the default pages Wordpress created (Privacy Policy and Sample Page) and select Trash to remove them.
Contact Us Page
Contact Us Page
CMS Site (subpages) Lab
PlayPlay
Finished Contact Us Page
Instructions
  1. Let's design the first subpage, Contact us.
  2. In the Page section hover over Contact Us page. Select Edit with Divi from the menu that appears below it. You will be brought to the font-end of the page with the Elementor page builder enabled.
  3. Press the Settings button at the most bottom-left of the page. The Page Settings panel will appear. Turn off Hide Title (no). Press Update. This will put the page title back on the page.
  4. Right-click over the text and button in the first section and select Delete to remove those elements in the section.
  5. Right-click over the section and select Edit Section. Edit Section will appear in the left panel. Change the Content Width to Boxed. Press Update.
  6. Right-click over the section and select + Add New Column.
  7. Press the left column Edit Column button. Change the Column Width (%) to "67". This will make the column 2/3 and 1/3.
  8. Press the Elements button to return to the Elements panel. Press Update.
  9. In the Elements panel click and drag the Google Maps element onto the inside the first column of the section. Enter "1 Seahawk Dr, North East, MD 21901" in the Location text field. Adjust the Height to "500". Press Update to update and then the Elements button to return to the Elements panel.
  10. Click and drag the Heading element onto the inside the second column of the section. Adjust it's settings and enter "Visit Us" in the Title field. Press Update and .
  11. Click and drag the Text Editor element below the last element. Adjust it's settings and enter "1 Seahawk Dr, North East, MD 21901" in the Title field. Press Update and .
  12. Click and drag the Divider element below the last element. Adjust it's settings then Press Update and .
  13. Click and drag the Heading element below the last element. Adjust it's settings and enter "Follow Us" in the Title field. Press Update and .
  14. Click and drag the Social Icons element below the last element. Adjust it's settings then press Update and .
  15. We must remove the remaining sections. Hover over each section and press the in the that pops up above the section to delete them.
  16. Make any changes that you want then press Update button.
  17. Press then EXIT TO DASHBOARD to return to the Dashboard.
Student Life Page
Student Life Page
CMS Site (subpages) Lab
PlayPlay
Finished Student Life Page
Instructions
  1. Let's design the second subpage, Student Life.
  2. In the pages section, hover over the Contact Us page. Press Clone from the menu that appears below it. This will create a duplicate.
  3. Hover over one the duplicate page and select Quick Edit. Enter "Student Life" in the Title field. Change the Status from Draft to Published. Once completed press Update.
  4. Hover over the Student Life page again. Select Edit with Divi from the menu that appears below it. You will be brought to the font-end of the page with the Elementor page builder enabled.
  5. Right-click over the elements in the section and select Delete to remove them.
  6. Right-click over the left column Edit Column button and select Delete.
  7. In the Elements panel click and drag the Video element onto the . Adjust the settings. Press Update to update and then the Elements button to return to the Elements panel.
  8. Click and drag the Heading element below the last element. Adjust its settings and enter "Student Experience" in the Title field. Press Update and .
  9. Click and drag the Inner Section element below the last element.
  10. Right-click over an Edit Column button and select Add Column. Do this twice, resulting in four total columns.
  11. Click and drag the Testimonial element into each column. Adjust its settings then Press Update and .
  12. Click and drag the Star Rating element under each testimonial element. Adjust their settings then Press Update and .
  13. Make any changes that you want to the page then press the Update button.
  14. Press then EXIT TO DASHBOARD to return to the Dashboard.
Menu
Menu
CMS Site (subpages) Lab
PlayPlay
Menu Creation
Instructions
  1. Now that there are multiple real pages we can create and apply a proper menu.
  2. In the Dashboard navigate to Appearance>Menus.
  3. Enter "Main Menu" in the Menu Name field and toggle on Primary Menu. Press Create Menu.
  4. In the left panel Add menu items under the Pages section select the View All tab. Toggle on Select All and click on Add to Menu.
  5. Make any adjustments you would like and press Save Menu.
  6. Depending on the theme you have installed there may be more options in the menu area or in customize. In our case this is good enough.
Theme Editor
Theme Editor
CMS Site (subpages) Lab
PlayPlay
Theme Editor
Instructions
  1. Your site is more or less complete. It could definitely use some polish but it is good enough for instructional purposes. The theme and plugins we installed allow us to control the look of the site. Some are more robust than others. If the theme/plugins installed do not include options you desire you can apply style manually. Let's explore changing the theme CSS directly.
  2. In the Dashboard navigate to Appearance>Theme Editor.
  3. Under Theme Files select Stylesheet (should be by default).
  4. Scroll to the bottom of the page. Here you can apply your own CSS to the theme stylesheet.
  5. Try adding:
       background-color: #e9e9e9;
  6. Press Update File.
  7. In the upper-left of the Dashboard press the site name to preview your site. You should see that the background color has now changed.
  8. Warning! Although this method does work it is not the preferred way of applying CSS. Every time your theme gets updated you will lose any CSS rules you have written.
Additional CSS
Additional CSS
CMS Site (subpages) Lab
PlayPlay
Customize
Instructions
  1. Besides adding CSS rules to the theme stylesheet you can apply CSS through the customizer.
  2. If you are logged in as Admin you can access Customize from the front-end. In the black admin bar at the top of the page select Customize. If you are in the Dashboard you can navigate to Appearance>Customize.
  3. In Customize navigate to Additional CSS. Here you can add CSS rules and see them applied instantly.
  4. It can be difficult to target elements. One way to do this is to use the browser tools. Find the element you wish to target (let's try the theme name at the bottom of the page). Right-click over the element and select Inspect or Inspect Element from the popup. This will open the inspector panel with the html highlighted.
  5. Right-click on the element in the inspector panel and select Copy>Copy selector or Copy>CSS Selector.
  6. In the Additional CSS panel, right-click in the text-field and paste. You have your selector!
  7. Next, write the CSS rule like you would any other. For example:
       .footer-credits {
          display: none;
  8. You will see your CSS applied. You may do this to as many elements as you like.
Final Review and Submission
Final Review and Submission
CMS Site (subpage) Lab
PlayPlay
Local Export
Instructions
  1. You should explore and add anything you would like in the site. The best way to learn is just to play around with it. When you are happy you are ready to export it.
  2. In Local right-click on the site name in the list on the left. In the popup choose Export. Don't enter anything in the window. Press Export. In the popup choose where you want to export and export.
  3. Now, log into Blackboard (Here) and click on this course. Inside the course, select Class 13, then the Class 13: CMS Site (subpage) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

You have officially completed the Wordpress lab series! You can see what is possible with CMS and how user friendly it is. Next up is the Final Project. It may be whatever you like using the same general process we covered in these labs.

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
 

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Submit Week 13 CMS Site (subpage) Lab in Assignments section on Blackboard