WordPress Tips

NOTE: You may revise and/or update any of these tips for your Designer Application assignment.

How do I change the color of my links?

Okay! Here’s how to change the link colors on your WordPress.

The other night, they implemented a new plug-in manager called Jetpack, but even if you are still using the old one, the rules are the same to edit the CSS. (:

(Refer to the email you received to learn how to switch between these two!)

First, you need to go to the CSS Edit page.

> Look at the left sidebar
> Find Appearance (in the bottom half of the menu)
> Find the sub-menu, Edit CSS

You are not on the CSS Edit page. You will see two sections.
The top section is where you put CSS/html coding. This is what mine looks like:

a:link {
color: #000000;

a:visited {
color: #808080;

a:hover {
color: grey;

a:active {
color: #0000FF;

#blog-title a {
color: #000000;

#blog-title a:hover {
color: grey;

The coding that says a:link, a:visited, etc, edit the color of links in basic pages. Anything below the header will be changed. Link is for basic appearance, Visited is for links that have already been clicked, Hover is for when your pointer is on top of the link, and Active is for links that have not been clicked. (: (At least from what I remember/understand.)

The coding that says #blog-title a, etc, will edit the color of the blog’s header!

Some profiles will need more specification, because there could be different CSS stylesheets applied to different sections (i.e. headers, posts, calender, etc, etc)

The bottom section of this page has two options:

> Add my CSS to Thematic’s CSS stylesheet.

> Don’t use Thematic’s CSS, and replace everything with my own CSS.

(Thematic is the theme I’m using.)

Select the FIRST ONE, unless you’re providing a completely new set of coding to override EVERYTHING on the page – which I highly doubt any of us are.

And that should be it! You can use this section to do a lot more, but this lesson is specifically about changing the color of links.

How do I add a link to my email address?

You could even use linking so that one page or one post could link to another. How you use links are up to you, but remember that anything you add to your page should be clear and useful, not just crazy for crazy’s sake.

Also, if you want to add a link to an email copy this code:

<a href=”mailto:YourEmailAddressHere”>NameHere</a>

Insert your email address where it says “YourEmailAddressHere” and your name (or whatever you want the link to read) where it says “NameHere.”

How do I hide the page title?

If you’re like me, you might want to hide the entry title of certain pages. You can do this by editing the CSS!

So instead of the above (which is redundant because the title ‘The Projects’ is also in the upper menu), you want this:

Go to your css and post this coding:

.page-id-150 #content .entry-title {
display: none;
Where is says 150, however, replace this with the number of the page whose title you would like hidden. In order to find this, you need to have the Default setting selected for your Permalinks. (To chance this, go to SETTINGS > PERMALINKS and select DEFAULT.)


How do I nestle pages?

1. Make a page.
2. Make a second page that you want to show up underneath your original page.
3. Select the original page as the “parent page” on the right hand side under page attributes.
4. You have a nestled page!

How do I reorder pages?

1. Add a new page (Pages -> Add New), or click on the page to be reordered.
2. Scroll all the way down and look on the right hand side for Page Attributes.
3. Change the Order of the page to your desired setting.

The pages will now follow their new numerical order on your navigation bar, with the largest numbers displaying to the right.

How do I use an image as a link?

If you want to have a clickable image, but the link button isn’t working, you can use the coding to help you out.

First, upload your photo the normal way, by clicking media and upload new. Then insert it into your page.

Once the image is on your page, click the html tab at the top left of the text box for the page. There, you will see your image in html form and it will have the link to the photo, which means that when you click the photo it will take you to a larger version of the photo.

So, the  link that starts with < a href is the link that needs to be changed.

So, remove that link and insert the link of whatever it is you want. It can be a page, a different photo, a post, whatever. And that’s it.

How do I put posts in pages?

Let’s say that you’ve decided that you want an intro page on your folio for writing. Then, you nestle pages into that page for different styles of writing (academic, creative, journalism, etc.). But, you don’t want to put all of your writing samples of that particular kind on the same page. Well, an easy way to deal with this is to create posts that will appear as tabs when you hover over the tab of a page (just like the tabs of nestled pages show up when you hover over the parent page). This way, your parent page, in this case “writing samples,” would open up tabs for the different writing types and then the different writing types could be hovered over to show the different examples. This eliminates having to scroll down a page to see different essay, projects, etc.

So, here are the steps:

1. Create a post.
2. Title it whatever you would like to show up in the tab when the page that the post connected to is hovered over.
3. Paste the information you’d like to appear in the post in the text box.
4. Create a category for the post (on the same page, under the text box and to the left) just type in the name of the post and click the box to the left of it.
5. Click update.

Ok, now you have created the post, but it will appear on your home tab. Since that’s not what you want we just have to take a few extra steps to get it to appear under the page you’d like.

6. Click on appearance and then on menus.
7. Assuming you’ve already created a menu, click the box next to the category you just created (on the bottom left) and then click add to menu.
8. Then, just move the category to be one layer below the page you’d like it to appear on.
9. Click save menu.

Tada! you’re done! And you can create as many posts/categories as you’d like and just keep adding them to the menu and placing them where you’d like.

What’s going on with the formatting and spacing?

One frustrating thing about being new to WordPress is that it is difficult to figure out how to properly format your pages, especially if you are writing poetry on your blog (which many of us English majors might wish to do). When HTML was created, it wasn’t created with poetry in mind.

If you are trying to create single-spaced poetry in your blog, it is easy to ensure that when you hit “enter” after a line, it will not be double-spaced; rather, it will be single-spaced as you want to be. Here is a handy tip to make sure that your lines will be single spaced:

  • To get single spacing between paragraphs in the Visual Editor, hold the “Shift” key down and simultaneously hit “Enter” at the end of your line. With no extra white space between lines, you can easily create distinct stanzas in your poem (or lists). If you are working in the HTML editor, hitting “Enter” once will give you a single-spaced line, and two hits of “Enter” will result in double spaced lines.

Word Spacing

What if you want to push your blocks apart? Sometimes in poetry (and other forms of writing) we need to add space between lines and between words to create style. The Visual Editor will ignore it if you simply press the “Space” key a few extra times.

  1. First, make sure you can see both rows of tools in the Visual Editor’s toolbar. The first row starts with the “B” (bold) icon. The second row should start with the style selector, or “Paragraph“. If you only see the first row, click on the last button on the right. This button is called “The Kitchen Sink.”
  1. Next, highlight your poem in the editor, and from the “Paragraph” icon, select the “Preformatted style.” This will make the Visual Editor preserve all the spaces you add.

This will change the typeface of your work to plain text. To change it back, you must work in your HTML editor. Once in your HTML editor, add this to the <pre> located before your text:

<pre style=”font-family:Georgia;font-size:13px;”>

Note One: you can obviously change the font family option to whatever typeface you want (I just stuck Georgia in there for reference). You can also change the point size.

Note Two: When you do apply the preformatted style to text, it will post with a light gray background. I have not been able to figure out how to remove this background, and I am not sure if it is possible. If anyone figures this out however, let me know!! Nonetheless, if spacing is very important in your poem, you may want to risk the gray background for its sake.