Skip to content

Homework 4A: WordPress

https://sites.usc.edu/translationalgenomicsWordpress

Homework 4A. Due October 4 by end of day, by indicating in blackboard for assignment 4.

Setup And Background

These steps have been done for you. Please do not do

Download And Install WordPress

cd ~/public_html
wget http://wordpress.org/latest.tar.gz
gunzip latest.tar.gz
tar -xvf latest.tar
chgrp -R apache wordpress # Change group to apache for folder
chmod -R 775 wordpress # Make group writable, etc
cd wordpress
cp wp-config-sample.php wp-config.php

edit wp-config.php

/** The name of the database for WordPress */
define( 'DB_NAME', 'userid' );
/** MySQL database username */
define( 'DB_USER', 'userid' );
/** MySQL database password */
define( 'DB_PASSWORD', 'password' );

Note that you need to change your userid as appropriate.Your password is just ‘password’. It is not your account password. Next, add the following text below <?php in order to allow direct installation of modules:

define( 'FS_METHOD', 'direct' );
define('WP_HOME','https://trgn.usc.edu/~davidwcr/wordpress/');
define('WP_SITEURL','https://trgn.usc.edu/~davidwcr/wordpress/');
$_SERVER["HTTPS"] = "on";

Your wp-config.php should look something like this, except that it will have your userid instead of trgn510.

Start

You should be able to go to your webpage, and begin the following steps.

Now go to the following page: https://trgn.usc.edu/~davidwcr/wordpress except with your username.

Success to this point should look like:

Setup your administrator account first clicking on the 5-minute setup with install.php.  You can use any password you like. You should then login and see a page like this.

Install a plug-in

First thing we will do is to install a plug-in.  Click on Plugins “Add New”, and install “Classic Editor”.

Please make it active.  If you are successful, clicking on Plugins should looks something like this:

Create a Home Page

Click on Pages on the left, and create a new page. You can call it Homepage.

Please type in “Header 1 Text” using header 1. Please make “Header 2 Test” using Header2 styling, “This is p style” in paragraph (p) style, and “ls -l” as a “codeblock”.  Please type “Here is a link to pubmed”, and make the word pubmed a link to “https://pubmed.ncbi.nlm.nih.gov/”.  Please type “This is custom styling.”, and edit the HTML (“Text” panel), to be a custom styling reading backwards by adding the style=”direction: ltr;unicode-bidi: bidi-override;”to the element.

Your page should look something like this:

Customizing Theme Appearance

In Appearance, click on customize.

We are only asking you to do a few changes, just to get the idea.  Lets set the homepage to the page we have created, and remove the widgets that dynamically add content.

Click on Homepage settings

In Appearance menu on left, click on Widgets.

Click on Widgets, and remove all the widgets for now.

Delete the current widgets.

Click “Publish” to finish setup.

Adding a menu

Lets add a menu, by clicking on Appearance->Menus.

Create a custom, giving it the name “Top Menu” and click Create Menu.

Please add the “Homepage” you created as the first menu item. For the second menu item, create a custom link to https://pubmed.ncbi.nlm.nih.gov/ labeled Pubmed.  Click to have it at Desktop Horizontal Menu location and the Mobile Menu.  Click Save Menu

Requirements For Homework Assignment

Create a site that:

  • Demonstrate selection of a Template that is not Twenty Twenty-One, with customization individual to you. Please do this using the Appearance tab.  Please pick one that has been installed over 10,000 times.
    • You must change colors and fonts. Do not use defaults.
  • Please add davidwcr as an editor with email davidwcr@usc.edu.
  • Please make sure Classic Editor plugin is activated.
  • Create following pages:
    • Page 1. Demonstrates a homepage welcome screen
      • Up to you what content, but there must be each one of these elements.
        • H1
        • H2
        • H3
        • H3 with custom inline styles that changes colors upon Hovering, by direct editing of HTML.
          • Please indicate that it is hoverable for me in the text, e.g. ‘Hover Example`.
        • p
        • quote
        • button
        • image manual
          • please point to image from your wordcloud on the previous homework assignment) by directly putting in HTML
        • Image Drop
          • Please place an image of your choice that accomodates accessibility with alternate text using the “media”.
        • a
          • Please link to your github with the text Github.
    • Page 3. Please create a page for testing putting javascript in, called Javascript.
  • Posts. Please create a 3 posts with content of your choice.
  • Please create a menu with following items:
    • Github Page
    • Posts Page
  • Please Remove all widgets, except  “Recent Posts”
  • Please add Additional CSS through the Template, setting h2 {background:#999 !important;color:white !important}`

How to find your login page

Add this to the end of URL

wp-login.php

sites.usc.edu/translationalgenomics/

I would change in the URL bar to `sites.usc.edu/translationalgenomics/wp-login.php

This will bring you to login screen.

 

 

University of Southern California