Week 4: Customizing your WP site Pt2, Plugins and Stylesheets

Topics:

  • Using Plugins
  • Some Useful Plugins reviewed
  • Customizing Themes Stylesheets

Using Plugins

  • Plugins are tools to extend the functionality of WordPress beyond what you can do with the basic install and themes. You can learn more about them here.

Plugins are created by members of the larger WordPress community of developers. There is a directory of plugins that you can access through WordPress.org’s extend section, or directly from your WordPress admin under the Plugins menu.

You can install plugins much the same way that you install themes, either through the admin, or by FTP into the wp-content > plugins folder:

Many plugins act as sidebar widgets, others add custom features to your posts, there is a great variation in how they operate. There is also a variation in their quality, so stick with popular plugins where the developer is actively keeping them current and has a high rating.

Always check that a plugin is compatible with your version of WordPress.

Some Useful Plugins

If there is something you want to do with your site that the core functionality of WordPress can’t handle, chances are someone has written a plugin for it. Here’s a few popular plugins that you might find useful:

Customizing your Theme using Stylesheets

Warning: If you don’t already know some HTML/CSS, I don’t recommend that you try this. It’s beyond the scope of the class for me to teach you, but I can show you where you can make modifications if you already know the basics.

Themes have at least one stylesheet that controls the layout, fonts, and colors of the site. Some themes allow you to modify these things through options or settings panels in the admin. But often this doesn’t give you the fine control you want, so you must edit the stylesheet directly.

The stylesheet or sheets are located in the themes directory. They are identifiable by a .css extension. You should figure out what the primary stylesheet is for your theme. It will probably have a name like style.css or styles.css. Some themes have a stylesheet specifically set up for you to make modifications without changing the original. This may be called something like custom.css.

You can tell what stylesheets are being used by your theme by viewing the source of one of your WordPress pages. Stylesheets are attached to an html page using the link tag, with this format:

<link rel="stylesheet" type="text/css" media="all" href="filename.css" />

There can be multiple stylesheets attached to a page, and they are applied in the order of their inclusion, so the rules on the last sheet take precedence over rules on the first sheet.

Editing Your Stylesheets

Before changing anything, you should always back up the original file!

You can edit stylesheets through the admin panel under Appearance > Editor. In order to edit files through this editor, you must change the permissions on them through your FTP client, much like we did for the uploads folder.

You will see a list of templates and stylesheets in the right column. At this point I would not recommend editing the templates, unless you have some background in programming.

If you make changes in the editor, they will affect your site as soon as you hit save.

You can also download the stylsheet files via FTP, and edit them with a text editor.

Again, I would only recommend that you edit the stylesheets if you already have knowledge of CSS. A good place for reference is the W3schools site.

I would also recommend the books CSS Mastery, and for more advanced techniques CSS3 For Web Designers.

A good Add-On for your browser to help you identify which part of the stylesheet is controlling the appearance of elements on your page is Firebug. If you are using Firefox, you can install this through Tools > Add-ons

Homework

  1. Install and start using at least one plugin
  2. If you haven’t already done so, create content for your static pages, and at least one post.
  3. If you are comfortable modifying the stylesheets, make any changes necessary to make your theme match your design conception.
  4. Be prepared to present your WordPress site in class next week (our last!)

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>