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:

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.