after-header

Text Widget oEmbed – The Plugin

The other day I posted about a theme trick to add the ability to insert embeded video using the WordPress oEmbed functionality using a text widget. This is now available as a plugin.

The theme can be found in the WordPress Plugin Directory

Support questions can be posted in the comments section of the plugin page here.

Auto-Embed Media in WordPress Text Widgets

I’ve used a trick for quite awhile that allows me to place shortcodes in the text widgets on my site.

WordPress 2.9 was released with the ability to auto-embed media, such as youtube videos, in posts by simply pasting a plain text URL into the post content.  I have thought for some time that it would be really great to be able to borrow from the idea behind the shortcode in text widget trick to enable the same auto-embed functionality in my text widgets.

With the help of a couple of my fellow StudioPress forum moderators, Charles Clarkson and Gary Jones, I now have a solution!  The YouTube video in the footer of this site, for example, is placed using the

PGNvZGU+W2VtYmVkXTwvY29kZT4=

shortcode to automatically embed the video.

This trick can be acomplished by adding the following code to the functions.php file in your sites active theme directory.

PGNvZGU+DQovL0VuYWJsZSBBdXRvRW1iZWRzIGZyb20gUGxhaW4gVGV4dCBVUkxzIGluIFRleHQgV2lkZ2V0cw0KYWRkX2ZpbHRlciggJ3dpZGdldF90ZXh0JywgYXJyYXkoICR3cF9lbWJlZCwgJ3J1bl9zaG9ydGNvZGUnICksIDggKTsNCmFkZF9maWx0ZXIoICd3aWRnZXRfdGV4dCcsIGFycmF5KCAkd3BfZW1iZWQsICdhdXRvZW1iZWQnKSwgOCApOw0KPC9jb2RlPg==

This should allow both plain text urls in text widgets and the

PGNvZGU+W2VtYmVkXTwvY29kZT4=

shortcode:

Examples:

PGNvZGU+aHR0cDovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PXltd2taQzVfaFk4PC9jb2RlPg==

Would look like this:

PGNvZGU+W2VtYmVkIHdpZHRoPSIyNTAiIGhlaWdodD0iMTY1Il1odHRwOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9eW13a1pDNV9oWThbL2VtYmVkXTwvY29kZT4=

Would look like this:

Westchester/Hudson Valley WordPress Meetup Presentation



Child theme can be downloaded from here

How to Remove the Comments Link in the Navigation

To remove the Comments RSS Link from the right side of the Navigation bar when RSS Links are selected add the following to your Child theme’s functions.php file
[Read more...]

How to Apply Custom CSS Classes to a Custom Menu

This tutorial will show you how to apply custom icons to your individual menu items, as well as customize and add additional links to the Primary Navigation extras. It uses the Delicious child theme for demonstration purposes.

Step One:

Set up a Custom Menu for your Primary Navigation.

Step Two:

Create custom css classes for each item.

For the Home link, I used the following:

#nav li.home a {
    background: url(images/home.png) no-repeat left center;
    padding: 0 0 0 25px;
    border: none;
    }

For individual links, since I chose not to use unique icons, this code was used:

#nav li a {
    background: url(images/star.png) no-repeat left center;
    font-family: Tahoma,Arial,Verdana;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    height: 28px;
    line-height: 26px;
    margin: 5px 0 0 0;
    padding: 0 0 0 25px;
    text-decoration: none;
    position: relative;
    border: 1px solid transparent;
    }

#nav li:hover a, #nav li:active a {
    background: #404040 url(images/star.png) no-repeat left center;
    color:#FFFFFF;
    border: 1px solid #333333;
    border-radius: 6px;
    -moz-border-radius: 6px;    
    -webkit-border-radius: 6px;    
    -webkit-background-clip: padding-box;    
    -webkit-background-origin: padding-box;
    }

Step Three:

Enable Custom CSS Classes via the Screen Options button.

Step Four:

Add your custom menu item to the menu. Be sure to assign the CSS class.

Step Five:

The Twitter link is also a custom menu item, with a special CSS class. Note the left margin in the code given below – this positions the link on the right side of the navigation. It can be edited according to the number of menu items present.

#nav li.twitter a {
    background: url(images/twitter-nav.png) no-repeat left center;
    margin: 0 0 0 350px;
    padding: 3px 0 1px 20px;
    border: none;
    }