Posts Tagged ‘CSS’

Tweaking your WordPress Theme (Part 3)

August 23rd, 2010

In this post, we will discuss the remaining 3 tips on tweaking your WordPress theme

Changing the Sidebar

The sidebar is the narrow vertical column placed either on the right or left-hand side of on your theme, and often jam-packed with lots of information to provide navigation for the visitor. The list of navigation item often includes Categories, Pages, Archives, Search, Recent Posts and Recent Comments.

The information displayed in the sidebar is controlled by the theme’s sidebar.php file.

Take a look at the file and you might see:

<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>

The Categories list might look like:

<li id=”categories”><?php _e(‘Categories:’); ?>

<ul>

<?php wp_list_cats(); ?>

</ul>

</li>

You can change the sidebar by editing the sidebar.php file. Or, you can also use the widgets subpanel ( located at Appearance > Widgets) in your WordPress admin panel to add and change your sidebar (this option does not require you to know any scripting). If you have installed and activated sidebar plugins and widgets, you will find these plugins listed in the widgets subpanel.

For more information: http://codex.wordpress.org/Customizing_Your_Sidebar

For more information on the Widgets subpanel: http://codex.wordpress.org/Widgets_SubPanel

Add Contact Form

By now, we all know that adding a mailto link on a website is the easiest way to increase the amount of spam in your inbox. Instead, use a contact form. WordPress has hundreds of contact form plugins you can choose from: http://wordpress.org/extend/plugins/search.php?q=contact. Contact Form 7 (http://contactform7.com/) is the plugin that we would like to recommend to you.

All you need to do is install the plugin, activate it and design your form, then add it to your page in just a click.

Add Google Analytics Tracking Code

Everyone wants to know how many visitors come to their website. Google Analytics is the most popular tool for tracking your website traffic. Adding the Google Analytic tracking code is very easy – setup an analytics account with Google and copy and paste the provided code before the </body> tag on the footer.php file (so that the code is embeded at the bottom of all pages of your website).

For more information: http://wordpress.org/extend/plugins/google-analytics-for-wordpress/

Tweaking your WordPress Theme (Part 2)

August 20th, 2010

In today’s post, we will be sharing another three tips on tweaking your WordPress theme

Page Navigation

Many themes display all of your pages across the top of your site. But let’s say you’d like to exclude a page from the main navigation.  Here’s one way you can do it:

Look for the following code (usually in the header.php file):

<?php wp_list_pages(); ?>

Change it to this:

<?php wp_list_pages(‘exclude=4’); ?>

This will tell WordPress to list all your pages except for the page with ID 4. You can change this number to whichever Page ID you’d like to exclude.

If you want to exclude more than one page, simply separate all the page IDs with a comma, like this:

<?php wp_list_pages(‘exclude=4,5,7,10’); ?>

For more information on WP list pages: http://codex.wordpress.org/Template_Tags/wp_list_pages

Add Something (Anything) to the End of Every Blog Post

Maybe you want to add a link to subscribe to your newsletter, an advertisement, etc. To the end of every blog post. Here’s how you do it:

The file you need to edit is the single.php. This is the template that displays your single articles. Open the file and find a good spot for the content you want to add. For example, to add a “Subscribe to newsletter” link after your post (and before the comments):

<?php the_content(); ?>

[the “subscribe to newsletter” link]

<?php comments_template(); ?>

Changing the Header Image

Websites are often judged by their looks and the first impression comes from the header – it is the first thing that your visitors see.

Your theme’s header is specified in the header.php and the style.css files. In the header.php file, you may see:

<div id=”header”>

<div id=”headerimg”>

<h1>

<a href=”<?php echo get_option(‘home’); ?>”>

</h1>

<div class=”description”>

<?php bloginfo(‘description’); ?>

</div>

</div>

</div>

And in the styles.css file, you may see:

#header {

background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/header.jpg”>

no-repeat bottom center; }

#headerimg {

margin: 10px 8px 0;

height: 192px;

width: 740px; }

To change the image file, replace the “header.jpg” with the name of the new image file you have uploaded to replace it. If it is in a different directory, replace the bloginfo() tag with the address of the image’s location.

If you are using an image that is the same size, then simply replace the image. But if the image is a different size, change the height and width in the #headerimg section.

For more information: http://codex.wordpress.org/Designing_Headers

Tweaking your WordPress Theme (Part 1)

August 18th, 2010

WordPress is one of the most popular CMS platforms in today’s web design industry, largely because of the vast selection of available themes, free and commercial. But most often a theme is only a starting point – there is no such thing as a perfect theme – many website owners start with a great theme and tweak it to perfectly suit their needs.

Tweaking is not a privilege of those proficient in scripting or programming. There are many “customizations” you can make to your WordPress theme, even if your scripting/design knowledge and experience is limited.

Here are some of the easy customizations you can make to your WordPress theme.

  1. Edit the theme’s CSS
  2. Display post excerpts or full content
  3. Excluding/including a category
  4. Crafting page navigation
  5. Add something (anything) to the end of your blog posts
  6. Change the header image (if theme has a header image)
  7. Change the sidebar
  8. Add contact form
  9. Add Google Analytics tracking code

We will be discussing the first 3 customizations in this post.

Edit Theme CSS

You can tweak colors, fonts, layouts, backgrounds and other visual elements by editing the Cascade Stylesheet, or CSS. Most of the time, you will find the theme’s CSS style in the file style.css. You can access this file via Appearance > Editor in your WordPress admin panel.

How to:

  1. Locate the attribute you want to edit. The attributes are identified by names indicating sections, such as body, header, etc.
  2. Make the changes to the code displayed between the curly brackets { }.
  3. Save the changes

For more information: http://codex.wordpress.org/CSS

Display Post Excerpts or Full Content

By default, your theme will display the full content of your blog posts on your home page. But if you would rather display only a short excerpt from the post as a little “teaser” to click through to the full article, you can tweak your theme to display excerpts.

To do this, you will need to get familiar with two tags:

1)      The tag that displays your full post content is <?php the_content(); ?>

2)      The tag that displays your post excerpt is <?php the_excerpt(); ?>

All you need to do is replace the content tag with the excerpt tag on your index.php file. Then, when you write a new post, enter in your article summary (or teaser) in the Excerpt field.

*Note* If no excerpt is set, it will automatically display the first few sentences of your blog post.

For more information on excerpts: http://codex.wordpress.org/Excerpt and http://codex.wordpress.org/Template_Tags/the_excerpt

Excluding/Including a Category

Let’s say you want to display posts from only one category on your homepage, or you want to exclude posts from one or more categories. Here’s how you do it:

Add this code where you want the posts to be displayed:

<?php query_posts(‘cat=3’); ?>

This code will display posts only from category ID 3. Change this number to whichever category ID you’d like to include.

If you want to do the opposite, all you need to do is add a “-“ in front of the category ID number, like this:

<?php query_posts(‘cat=-3’); ?>

This will exclude all posts which have the category ID 3.

For more information on query posts: http://codex.wordpress.org/Template_Tags/query_posts

Improving Your Page Speed (Part 4)

July 22nd, 2010

CSS is a style sheet language that is used to control the overall look and style of a website.  When website developers program CSS, they often leave lines in between the codes for better viewing.  This makes the code easier to read and modify.  However, the more spaces and lines a CSS file contains, the longer it takes for the page to load.

Under Page Speed, there is an option called “Minify CSS”.  It provides optimized versions of your website’s CSS files.  This option helps website owners to delete the unnecessary lines and spaces in order to boost their web pages’ loading speed.

The problem with minifying your CCS files is that they will be hard to read and hard to edit.  To solve this problem, we recommend the following.

  1. Back up your original CSS file by downloading it from your website.
  2. Download the optimized version of CSS from Page Speed.
  3. Replace the original CSS file on your website with the optimized one.

In terms of functionality, your optimized CSS file is identical to the original one.  By doing the above, your page speed will significantly increase.

In case you need to modify your website style, you can make changes in the original CSS file saved on your computer and then upload it to your website.  You can then use Page Speed to optimize your CSS file again and use the optimized one for faster loading.

CSS Lists as Hierarchical Navigation: Horizontal Menu with Background Image (Buttons)

June 19th, 2009

We will end this CSS Menu Series by learning how to turn this:

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

into this:

buttonmenu

1. Let’s start with the HTML code for our CSS menu:

<div id=”mainmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

2. Then, we will have to remove the bullets by creating a new CSS rule:

#mainmenu ul {
list-style: none;

padding: 0;
margin: 0;
}

3. Next, to get these menu items all on one line, we will insert this CSS rule:

#mainmenu li {
float: left;
margin: 0 0.15em;
}

4. Now that we’ve got the menu items all lined up next to each other, we need to make the buttons. We will be using a background image to create the buttons.

#mainmenu li a {
background: url(background.gif) #FFFFFF
bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #DCDCE9;
color: #0D2474;
text-decoration: none;
text-align: center;
}

The Full CSS Code

So, to achieve the menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

<style type=”text/css”>

#mainmenu {
width:30em
}

# mainmenu ul{
list-style: none;
padding: 0;
margin: 0;
}

# mainmenu li {
float: left;
margin: 0 0.15em;
}

# mainmenu li a {
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #DCDCE9;
color: #8CC919;
text-decoration: none;
text-align: center;
}

</style>

</head>

*NOTE: You can specify any hover effect for these menu items, including changing the background image or the text color. Simply make a copy of the entire #mainmenu li a CSS rule and change the selector to #mainmenu li a:hover

Example, as in our image above,

#mainmenu li a:hover {
color: #333333;
}

Resources