WordPress Portfolio Exercise
DOWNLOAD EXERCISE FILE
Getting started
- We are going to create a new blog using WP. Go to WordPress.com, log on and then go to the WordPress icon in the upper-left, select My Blogs. Once on that page, choose “create a new blog.”
- Go to that blog’s dashboard.
Basic Settings
- Go to Appearance in the left-hand column. Select “themes” and then search for Twenty Fourteen. Activate it.
- Go to Settings > General and change the blog title and subtitle to “Your Name” and “NYC Journalist”
Pages versus Posts
Posts are displayed dynamically, so they appear in reverse chronological order on your site, just like a blog, and they usually contain things like news items, blog items, and articles. Pages, on the other hand, are static. They’re displayed as freestanding, and have no real relationship to any other pages. They therefore contain things like information about the site, or contact information, or an FAQ.
But the main difference between posts and pages lies in how they’re organized. Posts are organized based on published date and time, category, tags, and author. In contrast, pages are only organized based on a parent-child relationship.
Categories
Pages are static content items and they stand alone. Posts are continually updated content that is organized using Categories. For this portfolio site, we are going to create four types of content: News, Photos, Video and Audio.
Go to the Post section in the left-nav of the dashboard (It looks like a stick pin.) Select Categories. Next, create Print, Photos, Video and Audio. You will be organizing all of the journalistic projects into these categories.
Creating a Page/Post
Locate the Resume and About documents. This is the type of background, static information you would provide in a page as it is not going to be frequently updated.
Note that there is a “template” option in pages. This allows you to tailor your pages to your content. This template option is something you will want to look for when selecting a theme.
Create two separate pages with the resume and about content. For the “About” page, you can upload a small headshot, aligned to the right side.
Inserting an image
Click to view the WordPress Tutorial on images.
Upload your image using the “upload/insert” command in the upper left hand corner.
You will be given four choices: from URL, from the gallery, from the media library or from a local file on your desktop. To upload a new image, choose the last one.
If the file has already been uploaded, you can find it by looking in the media library. If you want to use an image that is not on your computer, select URL and input that address.
You will be given several formating and labeling options.
- Alignment
Left: The image is aligned to the left and content flows around it
Center: The image is centered and content flows around it
Right: The image is aligned to the right and content flows around it
- Image size
If the image has been sized to the dimensions you want it, select “full size”. If it is larger image and you would like to display a smaller one, linking to the larger one, select medium, large, or thumbnail. (note: there may be some image distortion with the latter.)
- Image details
Title text is displayed as a tooltip (when a mouse is hovered over the image)
Caption is displayed directly underneath the image (will also serve as the alternate text.)
Link URL – This is what the image is linked to and what will show up in the window if someone clicks on it. Click the File URL button to link the image to its original, full-size version. If you want it to link to another site, use that URL. If it is purely for the story layout with no link, click on “None.”
When finished choosing your image settings, click on the Insert into Post button.
Custom navigation with menus
As you add new pages to WordPress, if you don’t have a custom menus set up, all of those pages appear in your header menu, and it can get quite messy. You want to control which pages appear in the menu and you may also want to add links to another site, or link to a specific post, or even a link to a category in your menu.
To create a new menu:
- Go to Appearance, and Menus.
- Create a new menu ‘Header.’ Call it “Top”
- Select “About” and “Resume” and add to menu, save. Some times you will need to click “View All” to see all the pages.
- Next in the menus section, click on the Manage Location tab. Select “Top Primary Menu”
Note: You can make one item subsidiary of another item by pulling it to the side, making it a sub-menu item.
Second menu
- Return to Edit Menus tab, then click on Make a New Menu
- Name it “Content”
- Next click on Categories and select all four. Some times you will need to click “View All” to see all the categories.
- Next in the menus section, click on the Manage Location tab. Select “Secondary menu in left sidebar”
Note: You can also add links to external sites using the “Links” option
Adding Post Content
Text WSIWYG “What You See is What You Get” editor
View the WordPress tutorial on its Visual Editor or view the PDF version.
Cheat sheet:
Inserting YouTube video
There are several different ways to insert videos into your page, depending on its source.
- To embed a YouTube or Vimeo video, cut and paste the URL into the Visual mode of the post. Update. Click preview. Reload the page. You may need to publish to see the video.
- Or you may take the “embed” code from Youtube and paste that into the HTML mode. The embed mode allows you to specify the size of the video and to make other modifications.
Saving and previewing a post
In the right hand column of the site, there is a “Publish” section at top. You should always — frequently — “Save Draft.” Once saved, you can “Preview” your site by clicking “Preview.” Once you are happy with the post you can hit “Publish.” You can always unpublish by changing this back to “Draft.”
Post stories
Haiti
Hart Island
- Copy and paste the text
- Insert “photogallery” and “pottersfield” into the story
- Click on featured image and upload “hartislandfeatured”
- Add a “more” link after the first paragraph (This determines how much text will show on the home page.)
- Select the category “News”
- Hit publish
Train show
- Copy and paste the text. NOTE: THERE IS SOUNDCLOUD EMBED CODE AT THE TOP OF THIS STORY. Therefore, you need to paste it in the “Text” mode. All code must be added in this mode, with the exception of URL to YouTube videos.
- Also note that there is embed code for a YouTube video at the bottom of the page.
- Add a “more” link after the first paragraph (This determines how much text will show on the home page.)
- Select the category “Audio”
- Hit publish
Latin Legends
- Open the Word document. Inside you will see the YouTube embed code for this video. Cut and paste it in the “Text” mode of the post.
- Add a “more” link after the first paragraph (This determines how much text will show on the home page.)
- Select the category “Video”
- Hit publish
Widgets
Widgets are most commonly found in sidebars and footers, and contain info like menus, recent posts, recent comments, polls, and other information.
Go to Appearance and drop it down, select Widgets. The Twenty Fourteen Theme actually has several separate widgetized areas that you can use: Primary Sidebar, Content Sidebar, Footer Widget Area.
We like having the full width on the home page, so we are not going to use the primary sidebar. We will, however, use the content sidebar.
- We will drag the following on to the content sidebar: Twitter, Facebook Like Box, Instagram and Flickr
- Open widget.docx in the folder. Inside you will find links and details for each widget. Note that you can rearrange the order by dragging and dropping the items.
If you don’t have a widget inserted in a certain area, that widget area hidden, and you have to activate it by dumping a widget into it.
Using text widgets
A general purpose widget, the text widget lets you set any title and input a wide variety of content using plain text or HTML code.
Customizing the Theme
Twenty Fourteen does come with some limited customization options. Most WordPress themes do offer some customization. Using the free WordPress.com host does tend to limit these.
To begin, click on “Appearance” > “Customize”
(NOTE: They try to get you to pay $30 for the privilege of making more changes. The for a fee options are listed under the heading “Custom Design.”)
Options:
- Colors: A palette is a selection of compatible colors that will be used consistently across your site. You can select one of four options. You can also select the color of your title.
- Menus: We have already addressed this above.
- Front: When you develop your portfolio page, you may decide you want to use a static page as your home, rather than a standard blog format. If this is the case, you would change the front to that designated page. We won’t do that in this exercise.
- Title and tagline: We addressed this above.
- Featured: This is important. You use this option to designate which stories will appear in your top slider. The default if to include a “tag” that says “featured.”
A Responsive Design
An important consideration in selecting a WP theme is whether it displays effectively on a range of devices: computer screens, iPads, smart phones. This is called a “responsive” design.
The Twenty Fourteen theme has three icons at the foot of the page. If you click on them you can actually see how your site will respond on each device.
iPad
Smart phone
