I discovered Readability by Arc90 a few days ago and have been enjoying it ever since. Basically, Readability allows you to read articles and blog posts without all the extra page clutter by simply clicking on a browser bookmark. There are even options that allow you to specify the font, color and text size of the article.
When developing a WordPress theme, it’s helpful to have a large amount of content (posts, pages, comments, etc.) in your testing blog. Not only does it provide you with content to style, but it also gives you an idea of a what a real blog would look like sporting your theme. There are many ways to populate your blog, and today we’ll look into a few of them.
This has the honor of being my least favorite method. Not only is it time-consuming, but it’s also exceptionally boring – and creating WordPress themes is all about having fun, right?
There more than a few WordPress .XML testing data files available for free on the web. If you are going to try to have your theme accepted into the official WordPress themes directory, it’s a good idea to use the one created by Automattic, because that’s what the WordPress.org people will be using to preview your theme. If you don’t like the one by Automattic, a Google search will give you a lot of other options.
If you are unfamiliar with importing content, the WordPress codex has a great tutorial to get you started.
This plugin will automatically generate the testing content for you, and then, with the click of a button, allow you to delete it all. It gives you options as to how much you wish to generate, the post dates of the posts and pages, and also lets you add custom fields in bulk. I really like this plugin, although it does have it’s drawbacks – one of which being that it doesn’t generate comments, which are very important in theme development.
There is not really a right or wrong way to do it, it just depends on you specific need. If you have a very customized blog, writing your own may very well be the way to go, while if you are designing a blog that won’t make use of comments, the WP Dummy Content Plugin will probably work just great.
I hope that you have gotten a better idea of the options available, and that this information will be helpful in your future WordPress pursuits.
Justin Tadlock wrote a must-read article explaining parent themes, theme frameworks, and child themes. In it he explains some common misconceptions people have about theme frameworks and how to use child themes. It answered several questions I’ve had for some time. Check it out!
JS1k is a competition to see who can make the coolest example using just 1Kb of JavaScript. I was checking out some of the demos, and was amazed at the creativity and ingenuity of some of the examples.
Here are some of my favorites:
Who knew you could do so much cool stuff with just 1Kb of JavaScript?
Call-to-action buttons are some of the most common and essential elements on today’s web, so creating them is a must-have skill for designers. Today, we’ll learn how to do it using CSS only.
Note: We will be using quite a few CSS3 attributes in this example that only work in WebKit and Gecko-based browsers. However, there is a new project called CSS3 Pie that should do the trick in IE. I encourage you to check that out.
<a href="#" class="button">
Click Me!
<a>
.button {
display: block;
float: left; /*so it won't span the whole page*/
padding: 15px 30px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 #003; /*gives the text an inset look*/
font: bold italic 20px/20px Georgia, "Times New Roman", Times, serif;
border: solid 1px #003;
background: #006; /*for browsers that won't understand the gradients*/
background: -moz-linear-gradient(#00b, #006);
background: -webkit-gradient(linear, left top, left bottom, from(#00b), to(#006));
border-radius: 25px; /*for opera*/
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-moz-box-shadow: inset 0 1px 0 #09F; /*gives the button a slight highlight on top*/
}
.button:hover {
background: -moz-linear-gradient(#006, #00b);
background: -webkit-gradient(linear, left top, left bottom, from(#006), to(#00b));
}
If everything has gone well, the button should look like this in Firefox:
Now if you were paying attention to the CSS, you will have noticed something very interesting… there is no -webkit-box-shadow declaration to give the button a nice highlight in Safari and Chrome. I tried this and got a very interesting result. Check it out below:
It seems that for some reason, the box shadow has not realized that there are rounded corners and it needs to compensate for them. I haven’t been able to figure out a fix for this, but maybe one of you can.
I hope you enjoyed making this example. You can check out a live demo here: http://examples.galengidman.com/cssonlybutton/.
One of the new features in WordPress 3.0, is the add_editor_style function. This allows you to style the elements in admin area WYSIWYG editor.
To do this, just add the following code to your theme’s functions.php file:
<?php
add_editor_style();
?>
WordPress will look for a file called editor-style.css in your theme’s root folder. If you wish to use a different filename or location, just type the path of the file in the function’s parameters, like so:
<?php
add_editor_style('somefolder/somefile.css');
?>
WordPress is really pushing for themes to adopt custom editor styles, and why not? It is quite easy to implement and adds a great touch of class. Will you use them in your future themes?
Andrew Nacin believes strongly in the importance of keeping WordPress up-to-date… so much so, that he decided to have a little fun getting his point across.
I just stumbled across CSS3 Pie, a new project that allows you to use the border-radius, box-shadow, and linear-gradient CSS3 properties in IE 6-8. I tried it and it worked pretty well—check it out at: http://css3pie.com.
If there is one thing I personally hate, it’s people spelling WordPress with a lowercase “p.” Apparently, Matt Mullenweg does too… so much so that in the latest release of WordPress, he created the capital_P_dangit() filter function. Basically, this searches for all the instances “WordPress” (note the lowercase “p”) and replaces it with “WordPress.”
I for one liked the idea when I heard first about it. When I see someone spell WordPress with a lowercase “p” it seems to scream laziness… as if holding down the “shift” key as they hit the “p” key would have been too strenuous.
However, much of the community has gone up in arms over the change, and I’ll have to admit that some valid points have been raised. It seems that when WordPress is installed in a directory called “WordPress,” the function will cause all kinds of problems with image URLs and such. Even in writing this post, I realized I needed to add the necessary code in my theme’s functions.php file to remove the filter (check that out here), just so I could point out the differences in spelling above. This causes me to see even more validity in the arguments against such a function.
If you want to see some really opposing views on the subject, check out these two sites:
What are your thoughts? Should it be removed, or is it a good addition to the platform?
I ran across this cool example by Sencha, demonstrating the ninja-like powers of CSS3. See if you can tell the difference between the CSS3 ads and the Flash ads. Make sure to view the page in a WebKit based browser such as Safari 4 or Chrome 5.