Tag Archives: list

CSS: Use a custom image instead of bullet points for unordered lists

Here is the line of code I use when I want to use a custom image instead of bullet points in unordered lists:

 

li { 
background:url(images/checkmark.jpg);
background-repeat:no-repeat;
background-size:20px 20px;
list-style-type:none;
padding-left:25px;
}

 

Simply replace the image URL in the code with the correct path to your image, adjust the width, height and padding, and you will be good to go :)

Here is an example of an unordered list that uses an image of a checkmark in place of the normal bullet points:

HTML: Add a drop down list of states with links to their respective pages

Here is how to add a drop down list of states with links to each of their respective pages to your web page.

First, add this script to the <head> section of your website:

<SCRIPT LANGUAGE="JavaScript"><!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//--></SCRIPT>

Then build your list of states like this:

<FORM>
<SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">
<option value="#" selected>Choose Your State...</option>
<option value="/states/alabama.html">Alabama</option>
<option value="/states/alaska.html">Alaska</option>
<option value="/states/arizona.html">Arizona</option>
<option value="/states/arkansas.html">Arkansas</option>
<option value="/states/california.html">California</option>
<option value="/states/colorado.html">Colorado</option>
<option value="/states/connecticut.html">Connecticut</option>
<option value="/states/dc.html">DC</option>
<option value="/states/delaware.html">Delaware</option>
<option value="/states/florida.html">Florida</option>
<option value="/states/georgia.html">Georgia</option>
<option value="/states/guam.html">Guam</option>
<option value="/states/hawaii.html">Hawaii</option>
<option value="/states/idaho.html">Idaho</option>
<option value="/states/illinois.html">Illinois</option>
<option value="/states/indiana.html">Indiana</option>
<option value="/states/iowa.html">Iowa</option>
<option value="/states/kansas.html">Kansas</option>
<option value="/states/kentucky.html">Kentucky</option>
<option value="/states/louisiana.html">Louisiana</option>
<option value="/states/maine.html">Maine</option>
<option value="/states/maryland.html">Maryland</option>
<option value="/states/massachusetts.html">Massachusetts</option>
<option value="/states/michigan.html">Michigan</option>
<option value="/states/minnesota.html">Minnesota</option>
<option value="/states/mississippi.html">Mississippi</option>
<option value="/states/missouri.html">Missouri</option>
<option value="/states/montana.html">Montana</option>
<option value="/states/nebraska.html">Nebraska</option>
<option value="/states/nevada.html">Nevada</option>
<option value="/states/newhampshire.html">New Hampshire</option>
<option value="/states/newjersey.html">New Jersey</option>
<option value="/states/newmexico.html">New Mexico</option>
<option value="/states/newyork.html">New York</option>
<option value="/states/northcarolina.html">North Carolina</option>
<option value="/states/northdakota.html">North Dakota</option>
<option value="/states/ohio.html">Ohio</option>
<option value="/states/oklahoma.html">Oklahoma</option>
<option value="/states/oregon.html">Oregon</option>
<option value="/states/pennsylvania.html">Pennsylvania</option>
<option value="/states/puertorico.html">Puerto Rico</option>
<option value="/states/rhodeisland.html">Rhode Island</option>
<option value="/states/southcarolina.html">South Carolina</option>
<option value="/states/southdakota.html">South Dakota</option>
<option value="/states/tennessee.html">Tennessee</option>
<option value="/states/texas.html">Texas</option>
<option value="/states/utah.html">Utah</option>
<option value="/states/vermont.html">Vermont</option>
<option value="/states/virginia.html">Virginia</option>
<option value="/states/washington.html">Washington</option>
<option value="/states/westvirginia.html">West Virginia</option>
<option value="/states/wisconsin.html">Wisconsin</option>
<option value="/states/wyoming.html">Wyoming</option>
</select></FORM>

WordPress Tricks: Display a list of the titles of the most recent blog posts from several different categories

Here is the code you can use to display the titles of your most recent posts in specific categories on a WordPress page.

Copy this block of code:

<?php
//for categories 1,5,3, show 1 post
$cat_args=array(
  'include' => '1,5,3',
  'orderby' => 'name',
  'order' => 'ASC'
   );
$categories=get_categories($cat_args);
  foreach($categories as $category) {
    $args=array(
      'showposts' =>3,
      'category__in' => array($category->term_id),
      'caller_get_posts'=>1
    );
    $posts=get_posts($args);
      if ($posts) {
        echo '<p><h4>Latest <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.' Posts</a>: </h4></p> ';
        foreach($posts as $post) {
          setup_postdata($post); ?>
          <p style="margin-left:20px;">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
          <?php
        } // foreach($posts
      } // if ($posts
    } // foreach($categories
?>
</div>

Now, simply paste that block of code into the page template where you want to display the list of post titles.

You can include or exclude posts from certain categories if you wish and can also control how many post titles to show from each category.

Let me know if you have any questions or trouble with this.

If you are looking for a way to display a certain number of blog post titles from just one category, you can use the code in my post Get the titles of recent blog posts from a certain category using wp_query.