1. The Loop Cheat Sheet (bueltge.de)

Download The Loop WordPress cheat sheet

2. Complete WordPress Cheat Sheet (ekinertac.com)

Download Complete WordPress cheat sheet

3. Theme Development Cheat Sheet (wptoy.com)

Download Theme Development WordPress cheat sheet

4. WordPress Infographic Cheat Sheet (smashinghut.com)

Download WordPress Infographic cheat sheet

5. Another Complete WordPress Cheat Sheet (onextrapixel.com)

Download Complete WordPress cheat sheet

Do let me know if you come across any better ones.

Let me know if you have any more to add to the list.

1. a[href^="http"]

This selector will style any link with a href attribute starting with ‘http’. This can be useful for styling external links to make it clear that users are being redirected away from your website, or for doing fancy things like adding a padlock icon to any links that point to secure pages (in this case replace the ‘http’ with ‘https’). Of course, you can change the string to whatever you want.

Example:

a[href^="http"] {
  background:url(images/new-window.png) no-repeat;
  padding-right:30px;
} 

Compatible with Chrome, Firefox, IE7+, Opera, Safari

2. h1 ~ p

The tilda(~) selector will select any element that is preceeded by the first element. This example will select any paragraph that is preceeded by a h1 tag. This could be useful if you wanted to indent paragraphs that are underneath a heading.

Example:

h1 ~ p {
  text-indent:20px;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

3. p:first-line / p:first-letter

If you haven’t guessed already this selector will target the first line or first letter of any paragraph. You can use this on any element but using it with paragraphs is the most common.

Example:

p:first-line {
  font-weight:bold;
}

p.fancy:first-letter {
  font-size:1.8em;
  font-weight:bold;
  color:#333;
}

Compatible with Chrome, Firefox, IE6+, Opera, Safari

4. img[alt]

The attributes selector will only target the elements with the specified attribute. This example will add a border to any images that have an alt attribute. You could use this to manipulate images that have a title or alt attribute in order to display a caption, for example.

Example:

img[alt] {
  border:1px solid #000;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

5. :before / :after

This CSS selector actually modifies the content of the page, not just the styling. You can insert content around the selected element using these selectors. In the following example the text “Error:” will be inserted before every paragraph with a class of ‘error’.

Example:

p.error:before {
  content: "Error:";
}

Compatible with Chrome, Firefox, IE8+, Opera, Safari

6. a[xyz~="abc def"]

This can look quite confusing, but all the above does is look for an attribute (xyz) on the selected element and take a space separated list of values, each of which can be styled differently.

Example:

<a href="#" my-attribute="category product">Some text</a>

a[my-attribute~="category"] {
  font-weight:bold;
}

a[my-attribute~="product"] {
  color:#cc0000;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

7. a[href*="roundedworks"]

This selector allows you to add styling to an element whose attribute value contains the supplied string. Possible uses could be to add a little ‘G’ icon to links pointing to any google page.

Example:

<a href="http://www.google.com/search?q=rounded+works">Google search link</a>

a[href*="google"] {
  background:url(images/google-logo-icon.png)  no-repeat;
  padding-right:30px;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

8. h2 + p

The adjacent select0r will select the first element that is immeadiately preceded by the former element. This is similar to number 2, but this selector is restricted to the first element only, whereas h2 ~ p would select all paragraphs preceded by a h2. The example below would the first paragraph that follows a h2 bold.

Example:

h2 + p {
  font-weight:bold;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

9. a[href$=".jpg"]

This selector searches the href attribute of a link and targets those that end with .jpg. Nice if you want to style image links or pdf links differently.

Example:

a[href$=".jpg"] {
  border:1px solid #e6e7e8;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

10. ul:first-child/ul:last-child

This selector is great for removing margins and borders from the first or last element within a specified parent, in this case the unordered list.

Example:

ul:last-child {
  border-bottom:0;
  margin-bottom:0;
}

Compatible with Chrome, Firefox, IE7+, Opera, Safari

First, create a new User Control, I’ve called mine RSSFeed.ascx. Go to your code-behind and add the following:

//declare the properties
private string _feedUrl;
public string FeedUrl
{
  get { return _feedUrl; }
  set { _feedUrl = value; }
}

private int _items;
public int Items
{
  get { return _items; }
  set { _items = value; }
}

//initiate the XMLNameSpaceManager
private XmlNamespaceManager _xmlnsm;

//grab the feed and bind it to a repeater control called rptRssFeed
protected void Page_Init(object sender, EventArgs e)
{
  XPathNavigator xpn = new XPathDocument(_feedUrl).CreateNavigator();
  _xmlnsm = XmlHelper.GetXmlNameSpaceManager(xpn);

  rptRssFeed.DataSource = xpn.Select("/x:rss/x:channel/x:item", _xmlnsm);
  rptRssFeed.DataBind();
}

//assign the feed values to controls within the repeater
protected void rptRssFeed_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
  if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
  {
    XPathNavigator xpn = (XPathNavigator)e.Item.DataItem;
    Literal litTitle = (Literal)e.Item.FindControl("litTitle");
    Literal litDescription = (Literal)e.Item.FindControl("litDescription");
    HyperLink hypLink1 = (HyperLink)e.Item.FindControl("hypLink1");
    HyperLink hypLink2 = (HyperLink)e.Item.FindControl("hypLink2");

    litTitle.Text = xpn.SelectSingleNode("x:title", _xmlnsm).Value;
    litDescription.Text = xpn.SelectSingleNode("x:description", _xmlnsm).Value;
    hypLink1.NavigateUrl = xpn.SelectSingleNode("x:link", _xmlnsm).Value;
    hypLink2.NavigateUrl = xpn.SelectSingleNode("x:link", _xmlnsm).Value;
  }
}

All that is needed in the design view of the User Control is the following:

<asp:Repeater ID="rptRssFeed" runat="server" onitemdatabound="rptRssFeed_ItemDataBound">
  <ItemTemplate>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="<%# (Container.ItemIndex < Items) %>">
      <asp:HyperLink Target="_blank" ID="hypLink2" Text="View" runat="server"><img src="images/view-button.png" alt="view full story" /></asp:HyperLink>
      <p><asp:HyperLink Target="_blank" ID="hyplink1" runat="server"><asp:Literal ID="litTitle" runat="server" /></asp:HyperLink></p>
      <p><asp:Literal ID="litDescription" runat="server" /></p>
      <hr />
    </asp:PlaceHolder>
  </ItemTemplate>
</asp:Repeater>

The code above simply lists the headlines with a short description, and there is a view button for clicking through to the full story.

To use this User Control in your pages you can simply drag and drop it from the Solution Explorer in to the Design View of your aspx page. This will add the control reference to the page automatically. Supply the two properties and you are good to go:

<uc1:RSSFeed ID="RSSFeed1" FeedUrl="http://feed.url.xml" Items="5" runat="server" />

That’s it. A simple reusable RSS Feed User Control.