How To Edit WordPress Links CSS and Modify Them (The a tag)

The way links are shown on a WordPress theme is determined from the theme’s stylesheet. Every WordPress theme is coded slightly different but finding the code to change should be relatively easy. This is a short WordPress guide to give you a general understanding of how to find and change the behavior of the links in your WordPress theme.

First, your themes files will need to be writable or you will need to edit the files in your hosting account or on your computer and FTP the edited files to your hosting account. I prefer to edit the files right from the dashboard. Either connect to your hosting account with an FTP client or login to the control panel of your hosting account and change the permissions of the theme’s files to 666 or 777. The location is the main directory WordPress is installed then this path: wp-config/themes/your-theme.

Again, all themes are coded differently and the links for the blog title in the header, the post title, sidebar, footer and within the content may all have separate styles applied to them in the stylesheet, and each may be called something different. From the WordPress dashboard click Presentation or Design, Theme Editor and on the right click the style.css file. The basic links within the content of the posts may look like this:

https://gist.github.com/wpcount/55b23d464d72f44634cf70a6ac57f631#file-style-css

You may not have a visited or hover style but you can use the example above to add it if you wish.

An example of the links in the header can be seen below.

https://gist.github.com/wpcount/55b23d464d72f44634cf70a6ac57f631#file-style2-css

Notice the call for the header before the link, this specifies just the links in the header, usually for the blog title. As I said, all themes are coded differently but the clues to look for the specific area you want to edit are similar to the header example above.

Before you edit or add your specific style to your theme I strongly suggest making a backup of the stylesheet and save it on your computer as a text file! Now just change the hex color or text decoration to your liking and save the changes.

Some example of text decoration are:

• none
• underline
• overline

There is a world of knowledge on CSS text properties and colors available online and a simple Google for CSS text and hex color codes can provide much more than I can here in this simple post.