Uploading a PDF

Uploading a PDF to a Post or Page

Create a new Post or Page. Or navigate to an existing Post or Page.

Click the Upload Media icon. (see image below).

In the upload dialog box click Select Files and navigate to the PDF on your computer’s hard drive and upload the file.

Click “Save Changes”
Note: You can upload more than one pdf at a time or repeat this process for multiple pdf’s.

Click the Gallery tab to view PDFs (and other media). Click “Show” to the right of the file name to add attributes and add it to your post

Once the file is uploaded, fill in a Title of your choice. The Title will appear on your web page as a link to the PDF file. I recommend telling users that it is a pdf and notifying them of its size in KB or MB, as shown in the image below.
Click “File URL”.
Then click “Insert into Post”

After inserting into Post a link to the PDF will be displayed.

Don’t forget to click Publish or Update to save the Post or Page.

And the link to a downloadable PDF will be displayed in your Post or Page.

Helpful Videos

Formatting Text

Basic HTML and the WordPress Visual Editor


On this page I go over some of the very basic html tags and how to format text in WordPress using the Visual Editor. Because I know many of you will only want to know how to do these things in WordPress, I have highlighted the WordPress sections in red, so you can easily scroll to them.

The first step in using the WordPress Visual Editor is to make sure that all the buttons are displayed in the Visual Editor by clicking the “Kitchen Sink” button.


Paragraphs – The <p> tag and Return key.

Text in a <p> tag looks like this with a full line space between paragraphs:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML: be sure to enclose each paragraph between <p> and </p>

WORDPRESS: Use Return key. When writing in the Visual Editor in WordPress, using the Return key will create a full line space between paragraphs WITHOUT any indentation on the first line. This is the default for writing online.

This is what paragraphs look like in the source file:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


Line Breaks – the <br /> tag and Shift-Return

Text when using the <br /> tag look like this:

This tag creates
breaks in text
for lists, etc.
new line
another new line

HTML: use the <br /> tag at the end of a line where you want a line break.

<p>This tag creates<br />
breaks in text<br />
for lists, etc.</p>

WORDPRESS: In the Visual Editor of WordPress use the Shift and Return keys at the same time to create a line break. Please take note of this. People frequently get very frustrated that they cannot create a line break rather than a line space for a full paragraph. So remember use Shift-Return to create a line break.


Bold Text – the <strong> tag and “B” in the WordPress Visual Editor

HTML: if you surround a word or phrase with the opening <strong> tag and the closing </strong> tag, it will appear in bold.

WORDPRESS: Select a word or phrase in the Visual Editor and then click the “B” button.

This is a paragraph with bold text.

The source file will look like this:

<p>This is a paragraph with <strong>bold</strong> text.</p>


Italic Text – the <em> tag and “I” in the WordPress Visual Editor

HTML: if you surround a word or phrase with the opening <em> tag and the closing </em> tag, it will appear as italic.

WORDPRESS: Select a word or phrase in the Visual Editor and then click the “I” button.

This is a paragraph with italic text.

The source file will look like this:

<p>This is a paragraph with <em>italic</em> text.</p>


Links

The <a> tag and the “link” button in the WordPress Visual Editor

Links in HTML are more complicated so let’s start with WordPress where it is easy and simple.

WORDPRESS: Select the text you want to the be linked. Click the “link” button. The link button is only live, if you have selected text.

After clicking the “link” button a dialog box will appear. Type or paste a url (web address) into the URL field, add a title or choose a page from your site. Then click “Add Link”.

That’s it for creating a link in WordPress. Pretty easy!

HTML: In HTML the <a> tag has a few parameters. The main parameter is the url to a web page and looks like this.
<a href="http://somewebsite.org/folder/file.hmtl">.
Make sure to add the closing tag </a> around the linked text. This is easily forgotten. And also make sure that you use straight quotes, not curly quotes as used in Word. And don’t forget to add the closing quote – href=”dont_forget_end_quote.html”.

The color, underline and hover color, etc. of a link are controlled by CSS, which is a much more complicated subject. If you are using WordPress, your designer or theme developer will have written the CSS and picked the color of the link text for you.

This is a paragraph with some Linked Text.

The source file will look like this:

<p>This is a paragraph with some <a href="http://somewebsite.org/folder/file.hmtl">Linked Text</a>.</p>


External Links opening in another window <target=”_blank”> or in WordPress checking “open in a new window/tab”

This is optional, but I like to have external links open in another window, so people will stay on the site.

This is a paragraph with an external link to Wikipedia Dance.

HTML: You still need to be careful with all aspects of the <a> tag. Notice the underscore at the beginning of _blank and don’t forget the closing quote – target=”_blank”.

<p>This is a paragraph with an external link to <a href="http://en.wikipedia.org/wiki/Dance" target="_blank">Wikipedia Dance</a>.</p>


Headlines

In HTML there are 6 heading or headline tags. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. They are usually arranged according to size and importance with <h1> being largest and most important <h6> being least. Usually there is a line space after a heading, as well. As a rule of thumb there is usually only one <h1> tag per page. You should also note that search engines read heading tags, so it is not only helpful for readers to organize your text with brief explanatory headlines but it will also help search engines find your content.

The size, color and look of the heading tags are determined by CSS and will have been designed into your WordPress theme by the theme developer.

HTML: To make a headline in HTML surround text with the appropriate heading tags. Like this
<h2>This is an H2 heading.</h2>
As always don’t forget the closing tag.

WORDPRESS: Make sure that all the buttons are displayed in the Visual Editor by clicking the “Kitchen Sink” button.

To create a headline select text, making sure it is on one line. Then use the dropdown list and choose the appropriate heading.

That’s it for WordPress.

This is an <h2> Headline.

This is an <h3> Headline

This is what the source file will look like.

<h2>This is an <h2> Headline.</h2>
<h3>This is an <h3> headline.</h3>

NOTE: If you are one of my clients (Daniel Wiener) I frequently use the <h2> tags for headlines, unless you have a complicated site with lots of formatting, you should probably only use the <h2> tag.


Helpful Videos

I highly recommend watching this video. It is 3 minutes long (SHORT!) and it explains almost everything you need to know about using the WordPress Visual Editor


HTML Resources

There are many HTML resources on the web but here are a few links that may get you started.

http://htmldog.com/reference/htmltags/
http://www.quackit.com/html/tags/
http://www.htmlgoodies.com/beyond/reference/article.php/3472851
http://www.w3schools.com/Html/html_examples.asp

Add Custom Fields

Navigate to your WordPress Dashboard and click on Posts to edit a Post or to create a Post.
Navigate to Posts

Once you are on an Edit Post page, scroll towards the bottom of the page until you see the Custom Fields Panel.

If your theme includes Custom Fields choose the appropriate field from the dropdown list below Names, in this instance “Is New Work”.

Add an appropriate value to the Value textbox. If you theme uses Custom Fields the value will be specified in the instructions. In this instance the value is “yes”.

Then click “Add Custom Field”.

Note: In this example I have made a theme for a private client. On her site there is a page called “New Work” where a grid of thumbnails will be displayed linking to new groups of art work. She is able to choose what is shown on the “New Work” page by adding this custom field to either a Post or a Page. Custom Fields are often added to themes to add a feature such as this.

Don’t forget to click “Publish” or “Update” to save the Post.

Delete a Custom Field

To delete a Custom Field, click “Delete” below the Custom Field.

Note: In this example, the user can modify what appears on the New Work page by adding or deleting this Custom Field on Posts and Pages.

As always, don’t forget to click “Update” or “Publish” to save the Post or the Page.


Useful Videos

Create A Post with Text and Image (using WordPress 3.4 image uploader)

Please Note: The WordPress Image Uploader was upgraded dramatically with WordPress 3.5. See updated instructions for using the WordPress 3.5+ image uploader.


Create a new Post by clicking the Posts left-hand sub-panel and then clicking “Add New”

Or click Add New at the top of the Posts page.

Add title and text as shown in the Create Posts tutorial on this site.

To add an image, click the Upload/Insert  Image icon.

Click Select Files and choose an image file from your harddrive.

Before you insert the image into your post choose the size and alignment.
Alignment: None will place an image on its own line with text above and/or below.
Alignment: Left will float the image to the left with text wrapping around the right.
I never use Alignment: Center.
Alignment: Right will float the image to the right with text wrapping to the left.

Usually I use Alignment: None for images that are as wide as the content section of the page.
And  I use Alignment: Left with Medium size images for magazine style articles.

Left Align Uploaded Image

Repeat until satisfied.

Click Publish or Update to save the entry.


Helpful Videos

Creating Posts

In the WordPress Admin click on Posts in the left hand menu.

You can also click the arrow (circled above) to open the Posts subpanel.

Click “Add New” to add a new Post.

On the New Post screen:
1) Add a title
2) add content by copying and pasting from a document or writing into the Visual Editor. The Visual Editor functions like most word-processing software, so it should be familiar.
3) Choose a Category
4) Click Publish

Check published version of the post by clicking the “View Post” button.

If there is a problem, return to the the recently published Post. Modify the recently published post by changing any of the text or changing the category and then click the “Update” button.

That’s it.


Helpful Videos

This video explains almost everything you need to know about adding a post:

Choosing the Featured Image (using WordPress 3.4 or before image uploader)

Please Note: The WordPress Image Uploader was upgraded dramatically with WordPress 3.5. See updated instructions for choosing a Featured Image with the WordPress 3.5+ image uploader.


Many themes use “Featured Image” as a way for administrators to choose which image represents a post. Frequently the Featured Image will be the thumbnail that represents a Post on a Category table-of-contents page (this is how it works for WPFolio). But they can also be used in slideshows for featured Posts and many other things.

On the Posts page of the WordPress Dashboard click “Set Featured Image” in the “Featured Image” subpanel in the lower right sidebar.

set featured image wordpress

Then on the “Add an Image” screen, click “Use as Featured Image”. (If you have not uploaded any images, please upload them.)

use as featured image wordpress
Be sure to click ” Save All Changes” before closing dialog box.

The featured image will appear in the lower right of the Edit Posts page. Like this:

featured image wordpress

You can easily remove the image and add another one, if you wish.


Helpful Videos

(This video speaks about some specific themes but the lesson about Featured Image is applicable to most WordPress Themes.)
http://vimeo.com/8462281


Helpful Links

http://wpfolio.visitsteve.com/wiki/instructions/adding-content/

Add Title, Media, Date to Artwork Image

In the admin section of WordPress navigate to the Post with a gallery of images you want to modify.

Navigate to Posts

There are 2 ways to access your uploaded images.

1) In the text box, click the gallery icon and then click the image icon to edit the gallery (see below).
Select and Edit Gallery

OR

2) Click the image icon adjacent to “Upload/Insert (see below)

Click to edit or delete image

In the overlay dialog box click “show” next to an image.
Click image title to display info

Add title, media, size and date to “Title”. (As you get to know WordPress, you may want to use the other options. For now, leave them as is.)

Repeat this process with all your images.

Don’t forget to do this or your titles will be lost and you will have to enter them again.

Adding Title to Image

Once you have finished click “Save All Changes”, at the bottom of the list of images.
Because this is a “Gallery”, do not click “Insert into Post”

Save All Changes

Exit the dialog box

Close Image Dialog Box

and click “Update”.

Update button

Check your page by clicking “View Post”. The title, etc. only appears in the “lightbox”, not below the thumbnails.

Repeat to create more “galleries”.

Useful Links

Adding Posts – WPFolio User’s Manual

Create Sticky Posts

In WordPress parlance, a Sticky Post is a Post that will stay at the top of the front page or depending on the theme will be featured prominently.

There are 2 ways to do this.

Create Sticky Post – Alternative 1

After you have created a Post go to the righthand subpanel called “Publish” and click the Visibility “Edit” link.

Check “Stick this post to the front page”. Then click “OK”.

Don’t forget to then click the “Publish” or “Update” button to save the entry.


Create a Sticky Post – Alternative 2

Go to the lists of Posts by clicking Posts in the Posts subpanel.

Place your cursor over a Post and a few links will appear. Click “Quick Edit”

Check “Make this post sticky” then click the “Update” button.

You can also use “Quick Edit” to change other options. It is very handy for quick editing (and thus its name).

And that’s it.

Embedding a Video

Step 1 – Copy the URL.

Go to youtube.com, vimeo.com or another video site and copy the url.

Step 2 – Paste the URL

Create a new Page or Post. Give it a title, as always.

Paste the url into the content text box.

Make sure that it is not hyperlinked and is on a line by itself.

A youtube url will look like this:

http://www.youtube.com/watch?v=uad17d5hR5s

A vimeo url will look like this:

http://vimeo.com/24532073

You get the idea… For most of you, you can stop here and ignore the instructions below.

Other Options (the hard way)

If you would like your video to be a different size, have a different color background, or other different options, you will need to copy and paste the “embed code”.

Vimeo Embed Options

Go to the Vimeo video. Click “embed”.

Click the Embed Button

Copy the code provided by Vimeo.

Copy the code.

If you would like to change from the defaults, click “Customize embed options”

Change the size, color, intro, etc. as needed. Then copy the modified code.

Change options.

Paste the text into the WordPress Page or Post. But make sure that you paste the code into the HTML editor and not the Visual editor.

Click Publish or Update to save the entry. (Afterwards, you can change back to the Visual Editor if you wish.)

Vimeo Help


YouTube Embed Options

Go to a YouTube video. Click “Share”

Then click “Embed”

Change the size or other options, then copy the code provided.

Paste the YouTube embed code into a WordPress Page or Post using the HTML editor and not the Visual editor (as explained above).  Click “Publish” or “Update” to save the entry.

YouTube Help (embed a video)


Helpful Links

WPFolio User’s Manual – Adding Video
How to Add a Video to WordPress the Easy Way