Working with WordPress

Introduction

WordPress is a free, open-source Content Management System CMS) that powers millions of websites worldwide. WordPress is designed to act as a simple-to-use "generic framework" that can be used to rapidly construct and maintain dynamic websites. It is widely considered the most popular blogging system in use on the Web today, and it is estimated that WordPress is used by more than 18.9% of the top 10 million websites as of August 2013 (Wikipedia)

Check out the following links to see the kinds of sites that can be created and managed using the WordPress framework:

Installing WordPress on the NYU i6 Server

Step 1: Setup Your MySQL Database

  • Begin by visiting the CIMS Database Manager site: https://cims.nyu.edu/webapps/databases
  • Log in using your i6 username and password
  • Click the "Add New Database" button. Type in "wordpress" as the name and click the "Create" button.
  • A database will be created for you - it will have your NetID prepended to it. For example, if my NetID is "abc123" my database will be named "abc123_WordPress"
  • Click the "Reset Database Password" button. A random password will appear in a shaded box at the top of the page. Copy this information along with the name of your database - we will need it for a future step in the installation process.

Step 2: Download WordPress

  • Next, visit the WordPress download page at: http://WordPress.org/download/
  • Click the "Download WordPress" button and save the ZIP file to your computer.
  • When the ZIP file has fully downloaded you should extract it (Mac: double click on the file; PC: right-click and select Extract Here)
  • A folder will then appear that contains the extracted files. Open this folder - you should see a number of files, including may that begin with the prefix "wp-"

Step 3: Modify Your "wp-config.php" File

  • Next we need to set up your new WordPress site so that it can connect to the database you created in Step 1.
  • Locate a file named "wp-config-sample.php" in the folder you just extracted. Rename this file to "wp-config.php"
  • Open this file up for editing in your favorite plain text editor (Notepad, TextEdit, TextWranger, etc)
  • Find the line labeled "DB_NAME" - paste in your database name from Step 1 where it says 'database_name_here'. For example, if my database name was "abc123_WordPress" the link would look like the following:
    /** The name of the database for WordPress */
    define('DB_NAME', 'abc123_wordPress');
  • Next, find the line labeled "DB_USER" - type in your NetID here. For example, if my NetID is "abc123" this like would look like the following:
    /** MySQL database username */
    define('DB_USER', 'abc123');
  • Next, find the line labeled "DB_PASSWORD" - type in the random password that was created for you in Step 1 above. For example, if my random password was "xyz567" this line would look like the following:
    /** MySQL database password */
    define('DB_PASSWORD', 'xyz567');
  • Finally, find the line labeled "DB_HOST" - type in "warehouse.cims.nyu.edu" on this line. For example:
    /** MySQL hostname */
    define('DB_HOST', 'warehouse.cims.nyu.edu');
  • Though not required, you can add some security to your site by setting up randomized "salt" values. You can do this by visiting this site: https://api.WordPress.org/secret-key/1.1/salt/ - copy the lines that appear when the page loads. Then replace the same lines in your "wp-config.php" file with the new randomized values.
  • Save this file, making sure that you've saved it as "wp-config.php"

Step 4: Upload WordPress to the i6 Server

  • Next, open up your FTP program and connect to the i6 server as you normally do when working on your website.
  • Navigate to your "public_html" folder.
  • Create a directory called "wordpress"
  • Open up the folder that you extracted at the end of Step 2 (the folder that contains the files that begin with "wp-". Highlight all the files and folders in this folder, including the "wp-config.php" file that you edited for Step 3, and drag them into the "WordPress" folder that you just created on the i6 server. Wait for the transfer to continue (it may take a little while).

Step 5: Set Up Your Site

  • Finally you can actually start using your site! Visit your new site at the following location: http://i6.cims.nyu.edu/~NETID/wordpress (make sure to replace "NETID" with your NetID)
  • A page that looks like the following will appear - fill in the blanks provided to set up your "administrator" account and click on the Install WordPress" button. This will complete the installation process and set up your administrator username and password so that you can log in and make changes to your site.

    When selecting a username for your administrator account please avoid using "admin" or "administrator" - these are incredibly common usernames and may make your site more vulnerable to hacking attempts



Step 6: Turn off Comments

  • If you did everything right you will be redirected to the "Dashboard" of your new site! Congratulations!
  • Finally we have to turn off the ability for people to comment on your site from the outside world. This is very important to prevent Wordpress comment SPAM. You can do this by clicking on Settings -> Discussion and uncheck the following items:

    • Attempt to notify any blogs linked to from the article
    • Allow link notifications from other blogs (pingbacks and trackbacks)
    • Allow people to post comments on new articles
  • Once you've done this click "Save Changes" at the bottom of the page

You're all done! See the next section of this tutorial ("The Dashboard") for instructions on how to start using your new WordPress site.

The WordPress Dashboard, Public View and Logging into your Site

Now that you have successfully installed WordPress you will probably want to view your newly created site and make changes to it. Here's how you can get started:

  • If you followed the directions above you will be able to view your WordPress site in a browser by pointing it to the following URL:
    http://i6.cims.nyu.edu/~YOUR_NET_ID/wordpress/
    Keeping in mind that you will need to replace YOUR_NET_ID with your actual NYU NetID.
  • When the page loads you will see the "public" view of your WordPress site. This is what a user on the web will see when they visit your site.
  • You can make changes to your site by clicking on the "Log In link on the right side. If you do not see a "Log In" link you can type the following into your browser's URL bar to go directly to the login page for your site:
    http://i6.cims.nyu.edu/~YOUR_NET_ID/wordpress/wp-admin/
    This will redirect you to a login page which will ask you to supply a username and password. This information was set up during the WordPress installation process - your username will probably be "admin" and your password will be whatever you selected when setting up your site.
  • Once you successfully log in you will be redirected to your "dashboard" - this is your "mission control center" that lets you manage all aspects of your site. You can switch between Dashboard mode and Public View mode by using the link at the top of the screen that contains your blog title. Here's a screen shot that points this out for you:
    Likewise, when you are in Public View mode you can switch back to Dashboard mode by clicking on the "Dashboard" link at the top of the screen.
  • Some people find it easier to keep two "tabs" of their web browser open so that both Dashboard and Public View modes are visible at the same time. You can do this by right-clicking on the Dashboard link from Public View mode and selecting "open in new tab". On a Mac you can hold down the Control key and click on link to do this as well. Note that if you do this you will need to "refresh" your browser every time you make a change in Dashboard mode. You can refresh your browser by clicking on the "refresh" or "reload" button at the top of your browser window, near the web address bar.
  • Your WordPress dashboard contains a menu along the left side that can be used to modify various aspects of your site. Future articles in this tutorial will discuss many of these options in detail. For now, click on the "Settings" menu option to expand it. Then click on the "General" sub-option. A page will appear on the right side of your Dashboard which can be used to edit your site's title, the tagline (the small title that appears below the main title) and the date and time format you want to use for time-based postings. Go ahead and change the title and tagline and click the "Save Changes" button. Then switch back to "Public" view and reload the page to see your changes.

Working with Pages

You might have noticed that there is a navigation bar along the top of your site. This bar showcases any "Pages" that you have created. For example, my CS101 WordPress Site has pages for "Assignments", "Exam Review" and "Lectures" (plus a whole lot more!):

You can create a new page or edit exiting pages by clicking on the Pages link along the left side of your dashboard. From here click on the "Add New" link to add a new page, or click the "Edit" link under a page to make changes to it. Once you are in page edit mode you can add or change text elements using the large text box in the middle of the screen. You can also edit the page title using the bar along the top of the editing interface - the page title will be what will show up in your site's navigation bar. When you are done you can click the "Publish" button on the right side of your screen to make your page "live". Note that when you edit your page in the future this button will change from "Publish" to "Update."

The toolbar across the top of the editing interface can be used to format and style textual elements that you wish to include on your page. Basic tools include bold and underlined text, lists, text alignment and a spellchecker. These tools work the same as in with WYSIWYG interface. You can link to other sites on the Internet or other areas of your blog by inserting an absolute hyperlink - to do this simply highlight the text that you want to turn into a link and click the "add link" button (looks like a small chain link). Next, type or copy/paste the absolute URL of the page you wish to link to in the box that appears. The link will become active and will be "clickable" once your page has been published.

Note that there are many more formatting options available to you in the editing interface. To display these items just click on the last button on the interface called the "Kitchen Sink" button. This will display a second row of buttons that can be used when formatting your content.

WordPress also supports page visibility & privacy settings, as well as page "hierarchies" to let you organize your pages into a meaningful navigation structure. Privacy and hierarchy settings can be found on the right side of the editing interface:

To set the privacy settings for a page simply click on the "Edit" link next to the word "Visibility" on the right side of the editing interface. From here you can select three privacy modes - Public, Password Protected, or Private. Public mode is completely open - anyone can visit your page and see your page contents. Password Protected mode will prompt the user to log in before they can see your page. Private mode restricts the page so that on you can see it from within Dashboard mode.

To create page hierarchies you can use the "Page Parent" drop down menu on the right side of the editing interface. Setting a page parent tells WordPress that this page should be organized underneath the parent page. This means that the page you are working on will not appear as a "top level" page on your site (i.e. it won't show up in the menu bar). Instead, it will appear as a "sub page" - this means that your users will have to hover over the "parent" page in the navigation structure in order to see any sub pages associated with that page.

Working with Posts

In addition to Pages, WordPress also lets you organize content into a structure called a "Post". Posts are like journal entries - they are time-based and will appear in reverse chronological order on your site. Posts are most useful for sites that are designed to act as a blog or online journal. By default, your Posts will show up on your site's homepage and will be the first thing that your users will see when they visit your site, but you can change this behavior if you wish.

You can add, delete and modify posts by using the Posts menu in your site's Dashboard. Writing a post is almost the same as writing a Page, except that Posts cannot have "Parent" pages and thus cannot be placed into a navigation hierarchy. Posts can, however, be given any number of "categories" in order to describe the content that a post contains. These categories can be used as hyperlinks to make it easy for your users to find content that interest them. For more information on categories see the "Widgets" portion of the tutorial.

Note that Posts are not always needed -- sometimes you just want to create a static website without any time-based blog entries. You can easily hide your Posts in WordPress by doing the following:

  • Open your site's dashboard
  • Click on the Settings link
  • Click on the Reading link
  • Change the option for "Front Page Displays" to "A Static Page" instead of "Your Latest Posts". This will force WordPress to show one of your Pages when your site loads instead of your Posts.
  • If you choose this option you can assign your Posts to another page inside your site (i.e. you could create a new Page called "Blog" and then assign your Posts to appear on that page) - however, this isn't required. If you want to turn your Posts completely off simply leave the "Posts Page" drop down menu blank.

Working with Media

Pages and Posts can contain a variety of external media types, including images, sounds and documents. WordPress makes it easy to work with external media items by giving you the ability to upload content directly to your site without having to use an external FTP program.

In order to set up your site so that you can upload images and documents you must first create an "uploads" folder on the i6 server. Here's how to get started:

  • Open up your FTP program and connect to the i6 server
  • Navigate to your "public_html" folder, and then open up your "WordPress" folder.
  • Find a folder called "wp-content" and open this folder
  • Create a new folder called "uploads" (all lowercase) inside this folder.
  • Next, you will have to set up the permissions on this folder so that the i6 server can upload content into it on your behalf. To do this you can right-click on the folder and select "Properties" or "Get Info" (depending on your FTP program) and set up the folder so that the following permissions are in place:
    Owner:  full access (rwx)
    Group:  full access (rwx)
    World:  full access (rwx)
    In octal the permission set that should be in place is "777"

Once you have set up your "uploads" folder using the steps above you can now upload images into your Posts and Pages. To do this simply click on the "Add media" button at the top of the editing interface when working on a Post or a Page. This button lets you upload files from your computer and incorporate them into the currently active page as well as see any files that you might have uploaded to the page in the past. Here's how to get started:

  • Edit any one of your pages
  • Click on the "Add Media" button
  • Click on the "Upload Files" link.
  • Click on the Select Files button. Browse and find an image or document you wish to upload
  • The image will upload and a checkmark will appear next to it. You can then click the "Insert into Page" button to insert the image into the page wherever the cursor is currently located. You can also scroll down on the right side of the interface and find the absolute hyperlink to where the media object is stored on the server. You can then copy and paste this link and use it as you would any other absolute hyperlink.

Note that you can always go back to the "Add Media" button to see what files you have previously uploaded and re-insert them into your page.

Themes

One of the most powerful features of WordPress is the ability to quickly change the visual layout of a site through the use of a "theme". Themes in Wordpress can be thought of as "templates" that can alter the apperance of an entire site with a click of a button.

You can access the Themes menu in WordPress by clicking on the Appearance menu on the left side of the Dashboard. Then click on the "Themes" link that appears below the Appearance heading.

The Theme menu displays the current theme that your site is using along with any other themes that are currently available. Your current theme is displayed at the top of the page, and your available themes are displayed below.

To switch to a different theme simply click the "Activate" link next to the desired theme. Then visit the public URL for your site and click the Refresh button to see the new theme in action.

Many themes come with the ability to customize their appearance. You can click the Customize link next to a theme to edit basic properties associated with that theme. Note that not all themes have the ability to be customized, and some themes are designed to be more customizable than others.

You can get new themes by downloading them from the web and installing them onto your site. There are many theme repositories on the web, but one of the most popular is the WordPress theme library which is available at http://wordpress.org/themes/. Here's how you can download and install a new theme onto your site:

  • Visit http://wordpress.org/themes/
  • Search for a theme that appeals to you.
  • Click the Download link - this will download a ZIP file to your computer
  • Unzip the theme file that you just downloaded. This will create a new folder for you that contains the files associated with your selected theme.
  • Open up your FTP program and navigate to your public_html/wordpress/wp-content/themes directory
  • Drag the folder that you just unzipped into this directory
  • Visit the Themes menu in your dashboard - you should see the new theme in your list of available themes.

Creating a Theme

You can also create your own themes in addition to using the pre-built themes that can be downloaded from worldpress.org. We call these "child" themes because they are based off of another theme (called the "parent" theme). Like a biological parent and child, the "child" theme will "inherit" its styles from the "parent" theme, but you can also "override" these styles so that the "child" theme has a unique look and feel. For more information about this process please visit http://codex.wordpress.org/Child_Themes. Here's how to get started:

  • First, find a theme that you like. This will be your "parent" theme that you will base your "child" theme off of. A good choice for this theme might be one of the built-in Wordpress themes like 'twentytwelve' or 'twentyeleven'. Make sure that the theme is installed on your site (see the 'Using Themes' tab to the left for more information)
  • Next, open up your FTP program and connect to the i6 server. Navigate to the 'public_html/wordpress/wp-content/themes' folder. You should see the theme you wish to work with in the listing. Make a note of the name of the folder that is holding this theme.
  • On your computer create a new file called "style.css". Paste in the following code:
    /*
     Theme Name:     My Brand New Child theme!
     Theme URI:      http://example.com/mychildtheme
     Description:    Twenty Twelve Child - Craig - A sample Theme!
     Author:         Craig
     Author URI:     http://www.craigkapp.com
     Template:       twentytwelve
     Version:        1.0.0
    */
    
    @import url("../twentytwelve/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    							
    Next, edit the code to include the following:
    • Replace the URL on the "Theme URI" line to point to your own website (technically not required)
    • Change the description line
    • Change the author line
    • Change the author URI (this can be the same URL as the the one you posted above)
    • Important: Change the Template to reflect the name of the theme that you are basing this new theme on. The name must be the folder in which the existing theme currently resides.
    • Important: Change the name of the theme in the 'import' statement to reflect the name of the theme you are basing this new theme on. It should be the same as the one you typed in the previous step.
  • Next, go back to your FTP program and create a new folder in the 'public_html/wordpress/wp-content/themes' folder for your new theme. Use all lowercase letters for this folder, and avoid spaces.
  • Upload your 'style.css' file into this folder
  • Now you can navigate to the 'Appearance' menu on your Dashboard and activate your new theme! You can place any CSS you want in your newly created "style.css" file and these styles will "override" the style of the parent theme you selected.
  • An easy way to begin making customized modifications to your newly created theme is to use your browser's built-in "Developer" tools. In Chrome you can click on View -> Developer -> Developer Tools. You can then use the "magnifying glass" tool to inspect any element on the page. Using this tool will expose the name of any element on the page as well as any styles associated with that element. Here's a screenshot of the process in action:



  • So, in the example above we are inspecting an 'h1' tag. We can then update our style.css file to apply a new rule to the 'h1' tag, like this:
    /*
     Theme Name:     My Brand New Child theme!
     Theme URI:      http://example.com/mychildtheme
     Description:    Twenty Twelve Child - Craig - A sample Theme!
     Author:         Craig
     Author URI:     http://www.craigkapp.com
     Template:       twentytwelve
     Version:        1.0.0
    */
    
    @import url("../twentytwelve/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    h1 {
    	background-color: yellow;
    }
    
    							

Widgets

Widgets are small, modular elements that can be placed into the sidebars of your WordPress site. For example, my Introduction to Computer Programming WordPress site has three Widgets installed - a Search Box, a list of Categories and a Calendar:

You can manage the available Widgets for your site by opening up your Dashboard and clicking on Appearance -> Widgets. From here you will be able to see all of your available Widgets in the center of the screen. You will also see any "sidebars" that are built into your theme - these appear on the right side of the screen. Most themes have at least one sidebar, and some have three or four. You can drag a Widget from the center of the screen into any of your sidebars to add it to your site. For example, say you want to add a Search bar to your sidebar - simply drag the Search widget into the appropriate sidebar ... and that's it! The next time you view your site simply click the "Refresh" button and you will see your new Widget.

Assignment

  • Install WordPress on the i6 server. We should be able to visit your site at http://i6.cims.nyu.edu/~YOUR_NET_ID/wordpress (see the 'Install' section to the left)
  • Create at least 3 pages of content (see the 'Pages' section to the left). Note that if you aren't building a blog then you may want to turn off the blogging capabilities of your site, or move your blog posts to a separate page. This can be set under Settings -> Reading in your Dashboard.
  • Select a new theme for your site (download from the WordPress theme archive and install it on your site)
  • Create and activate a "child" theme (see the "Creating a Theme" section to the left)
  • Finally, make at least 3 changes to the CSS of your child theme.

Make sure that you turn off comments so that people from the outside world cannot post to your site.

This is very important to prevent Wordpress comment SPAM. You can do this by visiting your Dashboard and clicking on Settings -> Discussion and uncheck the following items:

  • Attempt to notify any blogs linked to from the article
  • Allow link notifications from other blogs (pingbacks and trackbacks)
  • Allow people to post comments on new articles
What to submit
  • A link to your newly created Wordpress site
  • A copy of the "style.css" file that you created for your child theme.