Transparent User Interface Kit

Transparent UI Kit

This freebie was created by PixelKit. Click on the image to download the free PSD.

Posted in Uncategorized Tagged with: , ,

Free UI Elements: Price Table, Audio Players, Calendar and More

For your inspiration: a kit of user interface elements with a delicious color scheme; a simple, almost flat design with subtle hints at a third dimension. (Scroll down to download PSD file.)

Skinny Frames Modern UI Kit

Download PSD

Skinny Frames Modern UI Kit is a freebie pack provided by PixelKit.com for VileWorks.com.

Posted in blog Tagged with: , ,

Filter out empty lines in WordPress

I’m trying to add two captioned images in the WordPress editor and the Visual Editor keeps adding an empty paragraph between them. I don’t want an empty paragraph there — I got a nice CSS setup going on in the front end and that empty line is messing it up.

Extra Paragraph

The only way I could find to take care of this (other than reinventing the Visual Editor) was to add a filter to the WordPress content and have any occurrence of <p>&nbsp;</p> removed from the HTML.

This code goes in functions.php (which is in your theme folder):

// Strip out all <p>&nbsp;</p> from the content
function strip_empty_lines($content) {
    $content = str_replace('<p>&nbsp;</p>','',$content);
    return $content;
}
add_filter ('the_content', 'strip_empty_lines');

For your reference:

Posted in blog Tagged with: , ,

2 WordPress plugins for responsive websites

Free plugins are one of the best things that ever happened to WordPress. Whenever a new client asks how much work/time it would take to implement a certain functionality my default answer is “I’ll have to look into this, we may need to build it from scratch but there’s a big chance someone else already built a plugin for this that we can use and speed things up”.

I’ve created a few of my own to speed up my web dev process and today I’d like to share some with you. These two fall under “responsive web design” and are meant to cover some recurring front end necessities.

Conditional Lightbox

User’s screen is big enough to fit a lightbox? Not many things inside a mobile browser can be more annoying than encountering a lightbox. When activated this plugin adds a lightbox to all image links — only on non-mobile borwsers.

Minimize Comments on Mobile

It’s probably not a good idea to completely hide the comments on mobile devices, but you could have them minimized by default. Users want to see the comments? They tap a link and *poof* the list of comments appears.

What’s the point?

These jQuery scripts are supposed to give you a head start when building a responsive WordPress website. The WorPress Plugin Directory is like the App Store of WordPress websites, so after a quick search in your wp-admin these scripts will be a couple of clicks away.

Posted in blog Tagged with: , , , , ,

Free WordPress plugin: Correct My Headings

Type “correct my headings” and click the “Search Plugins” button in your WP Dashboard or download this plugin from the WordPress Plugin Directory.

If your subheadings appear on archive pages, they need to start from H3 (because H2 tags are used by the post titles on archive pages). This plugin dynamically corrects subheadings before they are displayed on your site — for SEO and semantic markup purposes. Depending on how you use headings in the text of your posts (you could have them starting from the H2 level or from the H3level) you will have a couple of options to choose from in the plugin’s settings page.

Options page

This plugin does not make any changes to your database: the subheadings will only be displayed differently on the front-end site. If you disable the plugin or decide to uninstall it everything will turn back to normal.

To install it type “correct my headings” and click the “Search Plugins” button in your WP Dashboard or download this plugin from the WordPress Plugin Directory.

If you have any questions or suggestions, please leave them in the comment section below.

Posted in blog Tagged with: , , , ,

Simple CSS footer menu

Ever been tempted to hard code pipe characters (vertical bars) between anchor tags to quickly produce a simple menu? Here I am in an effort to stop you.

The markup you could use and the one you should use

This is the quick and dirty (semantically challenged I’d say) markup you could use for a secondary navigation like a footer menu:

<a>Privacy Policy</a> | <a>Terms of Use</a> | <a>Contact</a>

…See those pipe line separation characters? Their sole purpose is to visually delimit elements. They have no business in the markup.

And this is the elegant markup (you already know) you should use:

<ul>
 <li><a>Privacy Policy</a></li>
 <li><a>Terms of Use</a></li>
 <li><a>Contact</a></li>
</ul>

So elegant you’ll wanna wear it to a wedding.

The CSS code

ul { margin:0; padding:0;
 color:#000; /* Base text color for the menu */
}
ul li { float:left; list-style:none; /* Makes the list items go horizontally in lieu of default vertical display */ }
ul li:after {
 content:"|"; /* Or go Facebook style and use "·" (the interpunct character) for separators */
 color:#666; /* You may want to make the separators a bit more subtle than the base text color */
}
ul li:last-child:after { content:""; /* No separator for the last item in the list */ }
ul li a {
 margin:0 8px; /* Set margins around the links */
 color:blue; /* Text colors for the links */
}

JSFiddle link

Simple Footer Menu

Notes

The above CSS snippet will affect all unordered lists on your page. I intentionally left it like that so you can change it to something more specific like:

#footer ul {...}
#footer ul li {...}
#footer ul li:after {...}
#footer ul li:last-child:after {...}
#footer ul li a {...}
Posted in blog Tagged with: ,

Password protected area in WordPress

If you ever need to set up a simple password protected area in WordPress, these snippets and plugins might come in handy when you’re hacking through your theme.

I believe this would be the logical approach: you create a main password protected page for your private section and then you create a bunch of child pages under that page. This way you’ll be using native WordPress functionality (page organization and page visibility) for most of your private section.

But you may find that a couple of patches will be in order.

WordPress Plugins

FT Password Protect Children Pages

One thing you will not want will be to have to password protect each subpage individually. You’ll just want to set a password for the main parent page and have all its child pages inherit the password protection. This plugin does exactly that.

Page Template Extended

Similarly, if you decide to use a specific page template for the protected section, it would be ideal to just set the page template to the main parent page and not have to worry about setting it for each of its child pages. This plugin makes subpages inherit their parents template.

Logout Password Protected Posts

You’ll also need a log out link that WordPress doesn’t provide by default. After installing this plugin you’ll be able to use php do_action(‘posts_logout_link’); ?> anywhere in your WordPress theme to produce the log out link.

Listing the subpages

Use this code in your theme to display the main parent page as a heading and the child pages below it:

<?php
/* List Subpages */
$ancestors = get_post_ancestors($post); 
$top_parent_id = end($ancestors); 
if (!$top_parent_id) $top_parent_id = $post->ID; 
?> 
<h3 <?php if ($top_parent_id == $post->ID ) echo "class='current_page_item'"?> > 
  <a href="<?php echo get_permalink($top_parent_id) ?>" title="<?php echo get_the_title($top_parent_id) ?>"> 
    <?php echo get_the_title($top_parent_id) ?> 
  </a> 
</h3> 
<ul> 
  <?php wp_list_pages('sort_column=menu_order&title_li=&child_of='.$top_parent_id); ?> 
</ul>

If you’ve created a page template for your protected pages, you can use the code above in it to give your users a navigation between the subpages.

A couple of snippets for functions.php

Change the default password protected text

The default text on password protected posts or pages is This post is password protected. To view it please enter your password below. Should you wish to change this text, add the following code to your theme’s functions.php file:

/* Change default password protected text */
add_filter('the_password_form', 'custom_password_form');
function custom_password_form($form) {
 $subs = array(
 '#<p>This post is password protected. To view it please enter your password below:</p>#' => '<p>This is my custom text for the password protected items.</p>',
 '#<form(.*?)>#' => '<form$1 class="passwordform">',
 '#<input(.*?)type="password"(.*?) />#' => '<input$1type="password"$2 class="text" />',
 '#<input(.*?)type="submit"(.*?) />#' => '<input$1type="submit"$2 class="button" />'
 );
 echo preg_replace(array_keys($subs), array_values($subs), $form);
}

Change the part where it says “This is my custom text…” in the code above.

Remember: never edit WordPress core files. Either use a plugin or use the functions.php file and filter your changes in from there.

Remove the word “Private:” from the titles

By default the titles of the password protected pages are preceded by the word “Private:” (followed by a colon). To prevent this from happening, add the following filter to your theme’s functions.php file:

// Removing "Private:" from private pages
add_filter('the_title','remove_private_prefix'); 
function remove_private_prefix($title) { 
  $title = str_replace('Private:','',$title); 
  return $title; 
}
Posted in blog Tagged with: ,

Password un-masking: Show passwords in clear text

Windows has a nice option labeled Show characters right below password input fields:

“Show characters” checkbox under a password field in Windows

Useit.com recommends it: It’s time to show most passwords in clear text as users type them. So without further ado, here’s what it looks like on the web: unmasking the password field This is the HTML code from the example:

Read more ›

Posted in blog Tagged with: , , , , ,

inFrame: Open Links in Iframes with jQuery

Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post. Obviously it would have been uncomfortable for me to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect. Using inFrame the reader doesn’t have to go away from the blog post to view demo files… just add a class of inframe to each of these links. In the second Official jQuery Podcast Ralph Whitbeck, Elijah Manor and their guest Richard D. Worth go through what inFrame is and when/why it’s useful:

The JavaScript

Click “Result” below for a demo.
Read more ›

Posted in blog Tagged with: , , , ,

How to update an HTML image gallery (PHP tutorial)

In this tutorial I’ll walk you through the steps involved in building a databaseless PHP admin section for Smooth Gallery. When done, without much effort you should be able to adapt the code to fit any similar JavaScript image gallery(/slider/switcher/swapper… whatever). So let’s take a look at it:

Smooth Gallery Manager

Smooth Gallery Manager

As mentioned on the manager page, the password is “demo” and you don’t have sweat about removing/adding/reordering images—the manager in the demo resets the file to an initial input each time a user logs in. For faster testing: right click some photo from the internet, select copy image location and paste it in the Add New Item/Image location field (that’s the only required field). Then press Add. Then in the Edit Items part copy and paste image locations from one item to another and then update it.

You will want to download the gallery + manager before continuing. After you do, open up manager.php and follow along. Only the more important parts ware discussed below, the rest is commented in the file.

So how come no databases?

It’s an image gallery, it’s not gonna have thousands of entries. There’s not much justification in creating a database for 5-20 items. We’ll keep it all in the HTML. And this will give us a chance to work with a really neat tool: PHP Simple HTML DOM Parser. This HTML parser written in PHP5+ is going to save us a lot of work. And I think this won’t be the last you hear of it here on Vile Works.

1. The logic behind it, in plain English

We’re going to have a simple log in/log out functionality, we don’t want anyone who knows the manager’s URI to be able edit our gallery. After the log in, two main options will be available: add new item and edit existing items. …And a log out link.

if logged in
	if received 'add item'
		add the item;
	display 'add item' form;
	if received 'update items'
		update all the items;
	display 'update items' form;
	display 'log out' link;
else
	display 'log in' form;

The conditioned actions “if received ‘add item’ -> add the item” and “if received ‘update items’ -> update the items” are placed in the code before their forms so that they will display a success or error message in the page just above the form that was submitted. The “add new item” functionality will add a new item at the beginning of the gallery: the image along with its title, description and a link to another page. The “update items” will allow us to:

  • change the items’ titles, descriptions, images and the URL the images link to
  • delete items
  • and to reorder the items

Read more ›

Posted in blog Tagged with: , , , , ,