CS 318 Lab 25 – WordPress
Dear students,
A lot of the world saves time and energy by using a content management system (CMS). These systems allow users that don’t know much about HTML and CSS to still produce beautiful websites. The most frequently used CMS is WordPress, which is responsible for 27% of the web. It accounts for 60% of the CMS market.
WordPress has other advantages besides hiding the HTML and CSS from content creators. It supports comments, multiple authors, search, categories and tags, and many other features. Your instructor’s blog is built using it! But it doesn’t have to look like a blog. There are many organizations that use it as a general website authoring tool, stripping off comments, dates, and other bloggish features.
Because of its importance, WordPress will probably be more integrated into this course in future offerings. For the time being, we will have a day of exploring. I have created WordPress installations for each of you. Your lab activity will be to apply some CSS to style posts.
Here’s your TODO list for next time:
- Be prepared to present your second draft of final project.
See you then!
Lab
Your task in this lab is stylize a WordPress installation. You won’t need GitHub, Brackets, or any software besides your web browser.
Follow these steps:
- Find a partner.
- Visit one of your WordPress installations. My installation—if I had one—would be at
http://www.twodee.org/cs318/johnch. Replacejohnchwith your own username. Ignore the Not Secure warning given by recent versions of Google Chrome. I will fix that, someday. You should see a very messy example post. Your instructor has installed for you the BlankSlate theme, which applies few if any CSS rules to the content. - Log in to edit your WordPress installation by clicking on the Log in link. Enter your UWEC username as the username and the password given to you by your instructor. You should arrive at the WordPress Dashboard.
- Edit the example post by clicking on Posts / All Posts and clicking the Edit link under the post. Change its title to Parkhurst’s Freedom or Death. Paste as the body of the post this text. Hit Update to publish your edits.
- Return to the Dashboard and click on the Customize Your Site button.
- Customize the blog’s metadata by entering the Site Identity menu. Change your blog’s title and tagline. Hit the left arrow button to return to the main menu.
- Get rid of unwanted widgets by entering the Widgets menu. Widgets are the content areas that show up in the sidebar alongside your posts. Remove the Search widget. We don’t need two of those. Return to the main menu.
- Customize the format by entering the Additional CSS menu. Your task for the rest of the lab session is to make this post look presentable by writing new CSS rules. For example, the header could use some enlarging, the paragraphs could use some separation, the sidebar widgets could be pushed to the side, and so on. You will not be given exact specifications of how to style the page. Make it look good. To what selectors does one write these CSS rules? Right-click on the content you wish to format and click Inspect. In the panel that opens up, find the element’s
classoridattribute. Use these for your selectors.