Category: Intermediate

Posted on

Sequential Foundation Photo Gallery plugin

A client recently asked me if they could upload a bunch of photos onto a page or post and have WordPress automatically lay them out sequentially right next to each other without any gaps or spaces. Our first thought was that WordPress should already do this by default but we checked and yikes it doesn’t have that feature yet.

So our friend Wok at Thinkademic wrote this custom plugin for us that will let you upload a bunch of pictures for you neatly lined up in a row next to each other. There’s no fancy schmancy JQuery slider effects or transitions. The plugin just generates a plain old grid of pictures lined up next to each other.

Once you have the plugin uploaded and activated, simply click on photo media upload button built into the post/page editor to batch upload a bunch of pictures. You’ll have a choice of how many columns across and how you want the pictures sorted by.

You’ll want to pre-size your pictures with Photoshop or another image editor so they’re at least the same height. Depending on the width of the page, the plugin will show as many images that can fit into a row.

If you specify imagesize="thumbnail" in the gallery shortcode parameters, it will use whatever thubmnail value you have setup in your media settings.

Here’s some CSS that you can add to your theme or “My Custom CSS” plugin to help style the layout :
.thefoundation-gallery img { margin: 0 !important; padding: 0 !important; float: left;}

See the example at the bottom of this page…

The usual fine print…
As always with any open source software, use the plugin at your own risk. The plugin is offered “as-is” without any warranties. We recommend installing this on a test site and thoroughly trying it out before you apply it to your live site. We’ll try to answer any questions you have here in the comments but can’t guarantee a timely response.

Get it: SequentialGallery-1.0

Example gallery – images from InterfaceLift.com:

Posted on

Adding Social Media to WordPress

What are the different ways that you can hook up WordPress and social media networks? Take a look at this presentation deck that I’ve uploaded to SlideShare that shows the various Social Media plugins and 3rd party apps that show how you can integrate social media networks with your WordPress site. Make sure you download the PDF and flip through each page to see the progressive steps.

WordPress social media tools

View more presentations from Noel Saw

Posted on

Round up of Three Google+1 Plugins for WordPress

Yesterday we showed you how to add a Google+ profile widget to your site. Now let’s take a look at two new to us sharing plugins with Google+1 integration. The important thing to point out is the term “Google+” usually refers to the social network that in my (humble) opinion is a hybrid of Twitter and Facebook. Considering that Google’s has had two years to dissect their competitors and figure out the best of both worlds, they’ve managed to make something…”magical.”

Then moving on, there’s the “Google+1” button you see on a lot of websites (including our site) is a component of “Google+”. Think of “+1” as something similar to the Facebook like button. But this button keeps your history that just happens to have “+1” navigation button on your Google+ profile page that shows everyone all the pages you have “liked” by clicking on the “+1” buttons. I am sure there’s some privacy control for it but I haven’t dived into it.

The particular button I am using on this site is simply called “Google +1” by Yatko. If you do a search for “Google +1” on the WordPress plugin repository you’ll see quite a few choices. We tried quite a few plugins and this one seems to be the most compatible with different themes so make sure you find the plugin by the author Yatko.

Once it’s installed and activated, just drag the widget onto your sidebar to have it appear.

So what if you want to have a Google+1 button that appears as part of your social sharing button suite? Unfortunately our favorites Sharedaddy or Share and Follow have not been updated with it.

But we just found a new player in town called Digg Digg that happens to have a lot of the same features of Sharedaddy but throws in “+1” button.

As you can see in the admin below there are a ton of choices, maybe too many choices.

Digg digg sharing

Like Share and Follow you can have it appear at the top of posts with different position options like floating (wrapping) with the content. Depending on your theme CSS you’ll have mixed luck with this. The fail-safe option is to select to have it appear at the bottom of the post so it avoids any mashups. The plugin also offers a “lazy loading” option so your post or page content loads before the javascript needed to render the sharing buttons. That way your page isn’t blank white while it’s waiting for the sharing assets and APIs to load.

The next plugin we’ll take a quick look at is called “Twitter Facebook Social Share” by Kunal Chichkar. This plugin also now features the Google+1 button in addition to the usual Facebook, Twitter, Stumbleupon, etc. services. It’s unique in that the sharing buttons sit stationary on the side of your pages regardless of what position you are on the page. The advantage to this is that it a visitor doesn’t have to scroll up or down to share the post. Here’s a screenshot of how it looks like on a demo site:

Googleplus share

The plugin settings offer quite a few customization options including the ability for the plugin to load the script at the bottom of the page similar to lazy loading. You can also define the background color and turn on rounded corners for the box too. Here’s a screenshot of the options:

Tf social googleplus share2

So give these a try of either one of these Google+1 plugins for WordPress and let us know what think!

Get it: Google +1 | Digg Digg | Twitter Facebook Social Share

Posted on

How to add a sidebar in Twenty Eleven theme

A few weeks before the WordPress 3.2 general release came out, we linked up a beta copy of the Twenty Eleven theme with a download link so our readers could preview it on pre 3.2 sites.

And no doubt many of you have updated to WordPress 3.2 by now. And some of you may have noticed that Twenty Eleven for whatever strange reason doesn’t have a sidebar widget area on the inner pages?!

It’s one of those “what were they thinking?” questions we like to cynically ask.

Kevin Muldoon and Bart Surminski to the rescue as Kevin outlines around 4 steps to easily add the sidebar to Twenty Eleven theme on his WPMods.com site. This could be a great exercise if you’re a confident beginner who wants to hack a theme for the first time.

But if you just want the modified theme pre-baked, there’s also a link by Niraj in the comments section of that article so you can grab a copy of the theme with the widget enabled.

Visit: WPMods.com

Posted on

MediaPass – a promising new content subscription plugin for WordPress

One of the biggest misconceptions of the web is that you can’t charge for content. But this trend is turning the tide as more media outlets like the New York Times and Financial Times are allowing people to read certain amount of content before having to pay. While the typical blogger isn’t writing the amount or quality of content or same quality as these publications there’s a lot of good stuff out there that just can’t always be supported by advertising.

So with the end of my spiel, we ran across a new WordPress plugin to help content creators create a paid content section for their site. The plugin is called MediaPass. It will let you “protect” pages, posts, and media/video files in different ways, such as overlaying the whole page with a dialog box or showing an excerpt. Visitors will be kindly reminded to pay up. The plugin is currently in version 1.0 so there are some rough edges but we think this plugin has a lot of potential to be a great plugin.

In the screenshot below are some of the different options for putting up your “paywall” on your WordPress site.

Mediapass v1

Once you install the plugin from the WordPress.org repository, you’ll need to head over to the MediaPass.com site to register for an account. Once your account is confirmed, you’ll go back to WordPress admin and enter in your credentials to the plugin settings. Next, you’ll need to add some shortcode to your posts or pages through the rich text editor buttons. Unfortunately, this part is not the most intuitive as the shortcode generator buttons on the rich text editor aren’t the most obvious. We wish there was a simple check box module as part of the post or page editor screen that could do the entire page overlay protection.

Mediapass v1 editor

So what does MediaPass charge and how do I get my money? MediaPass will take around 35% of your subscription fee to handle the processing and technology infrastructure. And yes, they can take either PayPal or regular credit cards. For now, they’ll send you a monthly check but we hope they’ll have direct deposit in the future. To sum it up, MediaPass has a lot of potential and is worth exploring if you’re willing to work through some of the manual steps.

Full disclosure: MediaPass is a sponsor on my Los Angeles based WordPress meetup groups.

Get it: MediaPass plugin

 

Posted on

Plugin of the Week: My Custom CSS

Have you ever had to hack the CSS for a WordPress theme or plugin only to later upgrade the theme or plugin and realized you lost your changes? Wouldn’t it be great if someone made a plugin that let you keep the CSS modifications stay intact whenever you updated your theme or plugin?

My custom css

It took us a while to find something like this but we found “My Custom CSS” plugin by Salvatore Noschese. This little great WordPress plugin tkeeps your custom CSS override regardless of what theme or plugin you’re using. Remember that if a certain class isn’t working, you may need to add the “!important” tag like in the screenshot above.

Get it: My Custom CSS

 

Posted on

How to bulk edit post attributes/settings

Here are three tips and tricks in case you ever need to edit the attributes for a ton of posts or pages and avoid sitting there for hours manually adjusting each post.

Tip one answers the question: How do I bulk edit the attributes for a bunch of posts?

For example if you wanted to close the discussion/comments for a bunch of posts without having to manually edit or even quick edit each post? Here’s how. When you’re in the WP admin posts listing page, click on the checkbox on the top far left column (next to Title) to have the system select all posts on the screen. Or click on the checkbox for which ever posts you want changed. Next click on the “Bulk Actions” drop down right above the select all checkbox.

Wordpress posts bulk select

One of the drop down items under “Bulk Actions” is “Edit”. Click “Edit” and then “Apply” button.

Wordpress posts bulk edit3

Then you’ll then see a screen like this:

Wordpress posts bulk edit2

Here you can apply a set of the same category(s), change the author, set comment/discussion status to the all the posts you’ve selected. Remember, once you click on “Update” – there’s no undo for your actions. So while its powerful tool, it can also be dangerous.

Tip two is: What if I have a 100 posts and don’t want to click-through 5 pages of posts? Did you know that you can define how many posts will show up per post listing page? WordPress normally shows 20 posts per page but you can set it up to 200. Once you’re in the posts listing page, click on “Screen Options” near the top right and you’ll see the “Show on-screen” field magically appear. Don’t forget to click on “Apply.”

Wordpress posts on screen limit

So both tips one and two could help an admin who needs to bulk edit the attributes for 100s of posts and wants to avoid having to browse through multiple pages of posts. Simply set the “show on-screen” field to “200”, click apply, and then bulk edit all the posts.

Tip 3 is for more advanced WordPress designers. Have you ever needed to know what ID numbers are your posts, categories, tags, links, and media without having to decipher the hyperlink in the status bar? Give “WP Show IDs” a try. It will add a new column to all your admin listings that show IDs on the far right column. It works great in conjunction with plugins that use shortcodes and require IDs like List Category Posts (which displays select blog posts on defined pages).

Posted on

Quick tip: Styling posts with a different background

Here’s a typical scenario: Say you have a WordPress blog and wanted to highlight certain posts (blog entries) on the home page to show up with a different background color or other styling like a border to draw more attention to these posts.

So how do you do that? With WordPress it’s surprisingly easy to do and it’s a good way for beginners to start theme hacking. As always make sure you have a backup copy of your original theme file that you can re-upload via FTP in case something goes wrong.

In this example, let’s say that you want posts for “events” to have a slightly gray background.

So the first thing is to mark all your post(s) with the “events” category in the WP admin post editor.

Then you would go to Appearance -> Editor and select the “style.css” file (or if you’re using something like Pagelines or WooThemes, go to your theme control panel’s custom CSS editor page).

Then you’d add something like this to the bottom of your CSS file.

.category-events
{
background-color: #e9e9e9;
padding:5px 10px 5px 10px;
}

And voila, if the CSS class matches the actual “slug” name being generated by WordPress, all the “events” posts on the home page will have a light gray background.

The important thing is that the CSS class (e.g; .category-events) matches the WordPress slug for that category. Sometimes if you have previously deleted that category and re-created it, WordPress will add “-2” to the end of that slug. You can tell what the slug name is by looking in the slug column in Posts -> Categories. Unfortunately other than directly editing the MySQL database there’s no easy way to rename or delete category slugs.

Posted on

Plugin of the Week: Sharedaddy plugin

A few weeks ago we looked at Automattic’s Jetpack plugin which adds a plethora of new features for WordPress. One of the more useful plugins incliuded in this swiss army knife of plugins is the Sharedaddy plugin which adds “share” buttons for Facebook, Twitter, Digg, and others onto your WordPress site. Did you know you can get Shareaddy as a standalone plugin too?

Once you install the Sharedaddy plugin (alone or as part of Jetpack), you’ll need to configure which types of sharing you’ll want to show on your WordPress site. You have your choice of Stumbleupon, Facebook, Twitter, Email, Digg, Reddit, and Print services.

Here’s where our (two) tips/tricks comes in:
You’ll notice two areas below where you can drag the type of sharing services you want to enable. If you drag the sharing service icons to the left, they’ll be shown in order exactly as you see on the screen. If you drag the icons over to the right, the services will be hidden under a main “Share+” button.

This part might be confusing for users so here’s a quick diagram. You can see the results of this on the bottom of this actual post.

Sharedaddy services

If you’re an advanced user looking to customize the plugin, we converted Sharedaddy into a shortcode plugin for use in one of our client’s custom themes and it has worked well so far. We were able to use CSS to add a colored background and make alignment modifications without much problems.

We were previously fans of the Sociable plugin but with the total lack of paid support provided by WPMU (Inscub) and the developer, we have moved on to Sharedaddy. It is probably the best out of the box solution out there for easy content sharing on your WordPress site.

Update plus 2nd tip: The biggest issue we ran into is that once the plugin is installed and activated, it doesn’t automatically turn on a set of default sharing buttons. So if you just activate it, you still need to define the social networks you want to show up.

We can see a situation where a user may just activate the plugin and forget to actually add popular networks like Facebook and Twitter. So our second tip, is that if you’re moving your site to another server, don’t forget to check and add the services manually otherwise you won’t notice they’re not there until you’re reading your published pages. Yes, we learned this the hardway! Also this would most likely apply to the version of Sharedaddy bundled with Jetpack.

Get it: Sharedaddy plugin