Using the WordPress embed shortcode for YouTube, Vimeo, more

This was going to be a post on building a WordPress shortcode that you’d use like inside your posts to take care of the embedding.  My experience has been that when you flip over to HTML view to paste your code and then flip back to the Visual editor to finish your post, a lot of the embed code gets lost as the TinyMCE editor tries to “fix” what it sees as bad or invalid code.  I’ve always overcome this myself by putting in some placeholder text, like al;dkjflkjsflkdj, doing the rest of my post, and then replacing that with the embed code in HTML view and posting.  A shortcode would make things easier and take out a lot of the unnecessary hassle.

Turns out, they’re one step ahead of me.

Starting in 2.9, WordPress implemented the shortcode.  What this means is that you can wrap a YouTube or Vimeo url in url tags and WordPress will take care of the code part automagically.  You can even enter the url without the tags (if you put it on its own line, like so:

http://youtube.com/yourvideo

That’s great, but what if you’re a control freak and want to specify the size of the embed?  WordPress has got you covered there, too.  Scroll down to Settings and click on Media.  You’ll see this:

Here you can set the max height and/or width it will default to when it creates the embed code.  You can also disable the function to automatically try to create an embed for plain text urls.

Does it work with everything?  No.  For security reasons, they’ve limited the sites they create the embed for to a white list of approved sites.  But chances are, if you’ve thought to embed it, they’ve got you covered.  A complete list is on the WordPress Codex page for Embeds.  Is it perfect?  No.  In particular, I’ve noticed Vimeo doesn’t always scale according to what you set in the Media Settings.  Still, for what it does, it’s pretty awesome.  Especially if you’ve been doing it the hard way all this time.

Now, you can still create a shortcode if, for example, you wanted to simplify things one step further and do something like .  You can head over to Creating Simple oEmbed-Based WordPress Shortcodes on Viper007Bond if you want to get your hands dirty and play around with that.

What’s it look like?  Well, it looks a little like this:

signs that Adobe Flash is on the way out

i’ll spare the discussion of how Flash is dead because Steve Jobs says it is.

while i agree with him on all of his points, i’m not really into the all bow to the great and mighty Steve camp, even while the rest of the industry bows to the great and mighty Steve.  (i may think it’s just a tad bit snotty for Steve to simply not support a development platform that’s become so ubiquitous as to be an industry standard, but i can’t deny that it’s his prerogative as a hardware and software manufacturer to support — or not — any platform he wants.  adobe wants to sue apple?  please.  on what possible grounds?  hardware doesn’t support software all the time, even to the point that intel-based Macs don’t run some of the software that non-intel-based Macs can run, and vice versa. what makes this issue any different than apple not supporting windows software?  i would like to wish adobe luck; if they win, it could set a precedent that would lead to the end of OS-specific software, which, in a way, is sort of what adobe is trying to do anyway with Flash and Air.)

i also don’t think the iPad is the be-all end-all technology product.  but there are some interesting trends.  and i do think it will change the way we think of computing and, in particular, how we look at the web.  (i don’t think this because i see apple as being able to single-handedly define our web browsing experience.  remember that little thing that Google announced six months or so ago, the ChromeOS?  and how the OS would only work on specially-designed hardware, about how the operating system, essentially, was the internet, about how the internet would be changing and blah blah blah, remember all that?  and all the people at the official announcement were busily typing into their netbooks thinking that this would be a netbook operating system but how could anyone want to run this netbook operating system when there wasn’t any actual software and had such limited features…kind of sounds like the iPad now, doesn’t it?  one major technology company with their fingers deep into the pot of user experience of the web with the most popular mobile browsing device — the iPhone — does not necessarily define the direction of the industry and the web (although it could).  two major technology companies with their fingers deep into the pot of user experience of the web — one of which is essentially the name brand of search — just might.)

this, however, is the interesting juxtaposition of information that i think is particularly telling about the demise of Flash as a standardized development platform:

the iPad is used, predominantly, by well-to-do men in the 35-44 age bracket.  it’s not the young geeks (like me) probably because we don’t have the cash to throw around to buy one (and are probably spending more time texting and listening to tunes at any rate, things that make the iPhone a better fit, although half of them also have an iPhone).  [source: Mashable — iPad: The Device of the Rich?]

the top 10 luxury brands (as reported by Forbes in 2009) fail to work on iDevices (iPad, iPhone, iPod Touch) because they use Flash.  some of them — most notably Gucci — have some functionality, but 6 out of 10 die when faced with a Flash-less browser, and of the broken 4, only Gucci has any real functionality.  [source: PSFK — Top 10 Luxury Brands’ Sites Fail To Work On iPad]

it doesn’t take a genius to do the math.  rich, older guys (older than me at any rate) — guys who probably largely resemble jon stewart, pictured above — are the ones buying iPads, but the top 10 luxury brands (read: stuff that rich guys — and gals — like to buy) can’t be viewed on iPads because they use Flash.  the makers of luxury products want the rich guys and gals with disposable incomes (the ones that buy iPads) to buy their stuff, so they are going to have to redesign their sites to use HTML5 or at least provide a non-Flash alternative.  more will follow.  eventually, whether Adobe likes it or not, whether HTML5 skeptics and detractors like it or not, whether HTML5 is really ready or not, HTML5 will become the de facto standard because people want their sites to be viewable on more platforms.

that’s why adobe is pissed off, and they have a point.  but so does Jobs.  HTML5 is an open platform.  Flash is not; Flash is owned by Adobe and, as such, developers need to wait for Adobe to add new features to be able to expand and innovate their software.  That is not the case with an open platform.  in the end, i think Jobs’ points trump Adobe’s.  even if Google makes a tablet, and HP makes a tablet, and Amazon upgrades the Kindle to be more tablet-like, and they all support Flash, the very fact that Jobs has put his foot down in a “not gonna do it” sort of way means that brands and developers will need to decide whether to build a site that can be viewed on a mobile Apple product or…not.  i think the one million iPads sold in the first month and the most popular mobile phone crowns can suggest what direction that will go.

the god-awful heyday of Geocities…

StumbleUpon found this site for me today, and there’s a particular reason why this gadget resonates with me…

the Geocities-izer

the tagline for the Geocities-izer by the aptly-named Wonder-Tonic (who brought us ShadyURL, a URL shortener/renamer that will make any URL look like it’s trying to scam you out of all your money and infect your computer with horrible pathogens) is: Make any webpage look like it was made by a 13 year old in 1996.  i wasn’t 13 in 1996. (i was already a jaded 18 in 1996, and had moved beyond such atrocities as GeoCities by then, although i did leave the site for Goth: the Corruption — an RPG i co-authored sort of loosely based on Vampire: the Masquerade — on GeoCities, that was mostly because i couldn’t be bothered to do anything else with it.  i did eventually move it to SFGoth.com, where it lives now.)  i did, like thousands of other people, start out on GeoCities, though, and that’s where i cut my teeth on web design.

in fact, in a way, GeoCities is what made me become a web designer, but not because it let you edit the HTML yourself.  GeoCities was responsible for me becoming a web designer because so many of the sites on GeoCities (including my own first few forays at putting together a website) looked like what comes out of the Geocities-izer.  When I finally learned how to build a site that didn’t look atrocious, my first thought was looking back at everyone else’s site and thinking what the hell is wrong with them??

GeoCities was simultaneously liberating (to some of us who learned how to code HTML the hard way through GeoCities) and an eyesore, and it’s no wonder it finally died (long past its’ expiration, in my opinion).  for a while there, GeoCities was then what MySpace is now, just with less direct interaction and more animated GIFs.

so, in some ways, the Geocities-izer fills me with sentimentality, and in other ways it makes me want to throw my computer through a window.  here’s to things that just won’t die…

Fixing bullet points (list items) in WordPress

As I was working today, I got a request to fix an issue in which bullet points and numbers for ordered lists were not displaying at all.  The list would display, but the bullets would not, and this was especially frustrating when using an ordered (numbered) list.

The problem

To understand the problem, first you need to have a brief lesson in WordPress (and probably HTML in general) structure.  What we commonly refer to as bullet points when talking about a PowerPoint presentation, or an outline, or a Word document, is known as a “list-item” (<li>) in geekspeak.  List items come in two flavors: unordered lists (bullet points, <ul>), and ordered lists (numbered lists, <ol>).

In web design, lists have far-reaching usefulness, above and beyond just a list of stuff that you’d put in your slideshow or report.  <ul>’s are used for sidebars, drop-down menus, links, pretty much any instance in which there is a series of several of the same kind of thing.  The problem, then, is that a lot of those things (say, sidebars, for instance) aren’t the type of thing that you would want to slap a • in front of.  This is resolved by putting this into the stylesheet:

li {
list-style-type: none;
}

Now you can have a sidebar and not have a bullet in front of every box in the sidebar, and every item within each box.

So what happens if you want bullets or numbered lists?  Because, as a side effect of declaring that all lists have “none” for their “list-style-type” you’re applying that declaration for list items that may want the bullets, like in a post.

The thing that I’ve noticed is that this is especially (and somewhat unnecessarily) prevalent in WordPress themes.  It doesn’t have to be this way.  You could just say something like:

.sidebar li {
list-style-type: none;
}

and not have it affect all the lists known to man (or at least known to your site).  But a lot of WordPress themes are based, to one degree or other, on one theme: the Kubrick theme that is the WordPress default theme.  Among other things, Kubrick has this in the style.css:

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

What Kubrick does is replace the standard bullet points with » which is written in CSS as:

.entry ul li:before, #sidebar ul ul li:before {
content: "class="aligncenter" 0BB 020"
}

What I’ve noticed, though, is that a lot of theme designers will take this out, not wanting the » in front of all bulleted lists, and either leave it out completely or replace it with “content: none;”.

How to fix it

Well the easy solution to fix it is to search for “.entry ul” (CTRL + F to find specific phrases is your friend), and see if you can find the “list-style: none” or “list-style-type: none” in there.  If it is, then you can just delete that line, or, if you’re afraid of breaking things you can’t fix later, comment it out like this:

/* list-style: none;*/

If you can’t find it anywhere, or don’t want to modify the original code, you can use this method which will recreate the standard bullets down to three levels (you can smack this at the very bottom of your stylesheet, not touch any other code, and everything will still be hunky dory):

html>body .entry li {
list-style-type: disc; /* this starts with the standard bullet point for all <li>'s */
}
html>body .entry ol li {
list-style-type: decimal; /* for ordered lists, use a number */
}
html>body .entry ol ol li {
list-style-type: upper-roman; /* for the second level of ordered lists, use uppercase roman numerals */
}
html>body .entry ol ol ol li { /* for the third level of ol's, use lowercase roman numerals */
list-style-type: lower-roman;
}
html>body .entry ol ul li {
list-style-type: disc; /* for an unordered list inside an ordered list, use a bullet */
padding-left: 10px; /* and give it a bit more room than the others */
}
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style-type: disc; /* for regular unordered lists, we use bullets */
padding-left: 10px;

}
html>body .entry ul ul li {
list-style-type: circle; /* for the second level, we use an open circle */
}
html>body .entry ul ul ul li {
list-style-type: square; /* for the third level, we use a square */
}

This also makes it so that anything beyond 3 levels (that’s not an ordered list) will default to a regular bullet point.

Isn’t this overkill?

Well, yes, since as I established, if you can find the line that is taking the bullet points out of post entries, it’s a whole lot of code vs. one line.  HOWEVER, if, say, you wanted your default bullets to be something other than a disc, say a square, you can use this code and swap around the options.  W3CSchools.com has an excellent document that talks about all the options you can use for the “list-style-type” property.

Alternately, you can use an image that you define, rather than the default circle, square, roman numeral, decimal, etc.  Using this:

list-style-image: url('path.to.your/image.gif')

instead of this:

list-style-type: square;

There’s also a W3Schools article on that, too.

anti spam an email address

class=”aligncenter” so, on the web, it’s pretty much accepted that whatever you put out there can and will be used by someone somewhere, sometimes exploitively.  one way this can cause frustration and headaches is putting your email address on your site.  now, some people (including myself) have started doing this myemail @ mydomain . com or myemail<at>mydomain<dot>com thing.  which is fine, but not very pretty.  so i came up with a neat little hack that has the same effect but looks prettier.  check it out:

<span style="margin-left: -.2em">&nbsp;</span>

now you can put that snippet where the space would go in the myemail @ mydomain . com example.  what it does is substitute your space with &nbsp; (which is ascii code for a space character), and then hides what it did with the margin-left: -.2em.  the final result would be this:

myemail<span style="margin-left: -.2em">&nbsp;</span>@<span style="margin-left: -.2em">&nbsp;
</span>mydomain<span style="margin-left: -.2em">&nbsp;</span>.<span style="margin-left: -.2em">
&nbsp;</span>com

and this is what it looks like:

myemail @ mydomain . com