CharityGoal.com Launches, Support our Cause

I’m happy to announce the launch of CharityGoal. This is a site we built for a client whose goal is to enable anyone to raise money for any (legal) cause. CharityGoal gives you an easy way to accept donations online, a beautiful landing page, and quick access to social network sharing.

For those interested, the site is built on top of WordPress. “Causes” are custom post types. A custom plugin we developed allows users who have signed up to create new causes through a front end form and to manage that cause. The checkout code was pulled from the Paid Memberships Pro plugin (also developed by us and GPL) and tweaked to work specifically for this site.

So take a look. While you at it, I’d appreciate a donation to our cause:

 

CharityGoal.com Launches, Support our Cause was last updated on September 21, 2011. Bookmark the permalink.

Tips and Tricks for Stranger Studios-coded Themes

If you’re a Stranger Studios client using one of our custom WordPress themes, these special formatting options may be available to you. If these tricks aren’t working as intended on your theme, contact us and we will troubleshoot!

Controlling Page Menus

  • Main Navigation Menu: The pages that appear in your site’s main menu have a custom field with the name “mainmenu” and the value “true”.
  • Footer Navigation Menu: The pages that appear in your site’s footer menu have a custom field with the name “footermenu” and the value “true”.
  • Mini-Navigation Menu: Some sites we have coded have a third menu, generally floated in the upper right header space. The pages that appear in your site’s mini menu have a custom field with the name “minimenu” and the value “true”.
  • The order in which the pages appear within the menu is controlled by the page’s “Order” attribute (found in the right hand column of the Edit Page screen within the admin).

Changing the Page title on the page vs. within a menu

Add a custom field with the name “longtitle” and the value of the longer page title. The custom field value will show up within the H2 tag on the page, but the shorter WordPress title will be used within navigation menus.

Hiding pages from the site map / sidebar menus

Add a custom field with the name “hide” and the value “true” to exclude it from your site map and other menus/navigation.

Controlling the content of the 404/Page Not Found

Rather than use the WordPress default content for a 404 page error, your theme has special functionality allowing you to control the text shown on this page. The page can be edited as any other WordPress page within the /wp-admin/ panel under Pages -> Edit Page. If you have a site with a lot of pages, do a page search for “404” to help locate this page.

Horizontal/Divider Line

I generally use a lot of thin grey lines to break up content and divide page or post content into meaningful chunks. This is the code for that thin line:

Here’s the HTML code above rendered as it would appear on your site:

Clearing DIVs

If you are preparing a page with a lot of floating images, you may find the content is rendering funky below the image. In order to clear out that floating image and make the new text render within the full page width, you want to insert a clearing div using this code:

Show excerpts from subpages on a Parent Page

We have written a special shortcode allowing you to display excerpts from the children of a parent page. The order in which these subpage excerpts display is controlled by the subpage’s “Order” attribute (found in the right hand column of the Edit Page screen within the admin). The shortcode will show the subpage title (linked), the excerpt (all content before the subpage’s “more” quicktag), and a link to “Continue Reading More About (subpagetitle) ».

The shortcode that will display subpage excerpts is:

[subpagelist]

To exclude any child pages from showing up in the list, write down a comma-separate list of subpage ids to exclude and use this shortcode:

[subpagelist exclude="1,2,3"]

Same Page As shortcode

Some clients have asked that one page have the same exact content as another page, just navigated to and titled in a different way. This could be useful if you are running landing page campaigns for the same content with a different styling or special meta data. Thus, we have written a special shortcode making one WordPress page dynamically pull in content from another page.

The shortcode that will display the same content as another page is:

[samepageas id="x"]

Where x is the id of the page you wish to pull in the content from.

SS-Downloads

If your site is equipped with the SS-Downloads plugin, click here for a tutorial on how to use that functionality. The basic jist is that you add a shortcode with the file name and optional title for download link like this:

[download file="http://path_to_file" title="optional title"]

The SS-Downloads plugin allows you to hide a downloadable file behind a required email capture on your site pages or blog posts. This would be useful for a White Paper download or other private content that you are using to generate a mailing list, track downloads, or simply block from mass-distribution.

Tips and Tricks for Stranger Studios-coded Themes was last updated on August 2, 2010. Bookmark the permalink.

SS-Downloads WordPress Plugin

Testing our new SS-Downloads plugin. It basically will require an email address before serving a specified file. Right now, I’m using a zip of the pre-release plugin for testing. I will update this to point to the latest version once it’s ready.

Should see a form or download link here.

[download file=”https://www.strangerstudios.com/wp-content/plugins/ss-downloads.zip”]

Future plans:

  • Option to require account creation (instead of just an email address). Done
  • Option to email file as attachment instead of showing a link. Done
  • Icons for files in template.

FAQ

Q: My downloads are incomplete, corrupt, or otherwise not downloading… especially large files.
A: This may be caused by a low memory issue or some other issue with serving the file through the getfile.php script. You can configure the plugin to simply redirect to the chosen file rather than serving it through the script by editing /ss-downloads/includes/setup.php and setting the GETFILE_REDIRECT value to true. The file will have to be served in a public web folder, and 733t hackers will be able to see the actual URL of the file.
Note: I’ve changed the GETFILE_REDIRECT to default to true. But if you have the inverse problem (the download is working, but you want to make it more secure by avoiding the redirect — which savvy users might be able to watch to get the URL of the file) you can set that value to false.
Edit:
Bob at 2bretired.com has a good writeup of how to clear out the download stats for your files if you want to do that sort of thing.
SS-Downloads WordPress Plugin was last updated on July 21, 2010. Bookmark the permalink.

Make One Category Display Full Posts in Thesis Theme

Update: Seems like this doesn’t work with the latest version of thesis. If you get it working, let me know.

Got a request from a client to have a specific category page on their WordPress blog running the Thesis theme show full posts (vs. excerpts) for just one category. So I’m going to figure it out and write the steps here for the benefit of humanity.

First, to be clear, I’m not talking about changing ALL CATEGORY PAGES from excerpts to full posts. That can be done easily through the Thesis Display Options. You would change the “Posts” display options to “display full content” and the “Archives” display options to “same as home page”.

What I want to do is show excerpts on every category page except one. You do this by settings up a custom category theme, and Thesis has its own way to do that. A custom category theme wasn’t optimal for this install, so I need to do something different. It’s good to have different ways of doing things. Maybe my method below works for you too.

Here’s what we’re going to do.

  1. Use the “thesis_hook_before_post_box” hook to check the current category and if it is the “Quick Takes” category, change the $thesis[‘display’][‘archives’][‘style’] value to “content”.
  2. Use the “thesis_hook_after_post_box” hook to change the $thesis[‘display’][‘archives’][‘style’] value back to what it was before we tweaked it.

Sounds complicated, but it’s only a few lines to add to the /custom/custom_functions.php file in your Thesis theme folder.

function quicktakes_fullpost_setup()
{
	$target_category = "Quick Takes";

	//saving the global archives display setting so we can revert later
	global $thesis, $saved_thesis_display_archives_style;
	$saved_thesis_display_archives_style = $thesis['display']['archives']['style'];

	//checking the category, if it's the target category, then set the display to full post
	$current_category = single_cat_title("", false);
	if($current_category == $target_category)
		$thesis['display']['archives']['style'] = "content";

}
function quicktakes_fullpost_cleanup()
{
	//we're setting the display archives style back to what it was before we tweaked it
	global $thesis, $saved_thesis_display_archives_style;
	$thesis['display']['archives']['style'] = $saved_thesis_display_archives_style;
}
add_action('thesis_hook_before_post_box', 'quicktakes_fullpost_setup');
add_action('thesis_hook_after_post_box', 'quicktakes_fullpost_cleanup');

Be sure to change the $target_category variable to the title of the category you want to change.

If you want to do the inverse of this, which would be to show the excerpt on just one category page and update show the full post on all others, you would:

  1. Change the Thesis Display Options for posts to “display full post content”
  2. Change the Thesis Display Options for archives to “same as your homepage”
  3. Then adjust line 12 in the code above to set the style to “excerpts” instead of “content.

I hope this helps. Let me know if you have any questions about this or similar customizations for Thesis.

Make One Category Display Full Posts in Thesis Theme was last updated on July 19, 2010. Bookmark the permalink.

On Ustream: WordPress Plugin to Capture Email Addresses in Exchange For a File Download

Update: No longer streaming. The plugin works great. Kim is going to make it pretty, then I’ll post to WordPress and do a right up.

I’m streaming live right now while I work on a WordPress plugin. Follow me at ustream.tv/channel/stranger-studios.

I’ll be working on a plugin for a feature that we’ve done a million different ways: asking for a user’s email address in exchange for a link to a file download. A solid plugin for this will save us a lot of time. If it turns out well, I’ll put it in the WP plugin directory and link to it from here.

Here are the requirements/specs I have for this plugin:

  • Should use a short code of the form [filedownload: /path/to/file.txt] to define where the form should go and what file.
  • The form will submit to the current page, log the email entered, add a session flag.
  • If an email is in $_POST, the post/page will show the download link instead of the email form.
  • Files will be hidden behind a script to obscure the path to the file. The script will check for the session flag before returning the file.
  • Should use a template to make it easy to change the HTML/CSS for the form.
  • Should be easy to adjust the addEmail code to work with Constant Contact/etc.

That’s it. Please join me. Post questions to the chat. Again, if this code comes out clean, I hope to share it.

Enhanced by Zemanta
On Ustream: WordPress Plugin to Capture Email Addresses in Exchange For a File Download was last updated on June 30, 2010. Bookmark the permalink.

Editing the StudioPress Lifestyle Theme

A client contracted us to make some updates to the StudioPress Lifestyle WordPress theme. I’m documenting the changes here so our client can possibly do this work themselves in the future, and it may also help others out there looking to tweak the StudioPress (or really any) premium theme.

Changing the Menu Colors

Changing the color scheme involves updating the style.css stylsheet and creating new versions of various images. I did a rough mockup of the color changes in Photoshop, and then went to work on the images.

To change the header and headline elements from blue to orange, I did the following steps to these files:  header.png, header_blank.png, logo_blank.png, headline.png, and topnav.png.

  1. Open the image in Photoshop.
  2. Goto Image –> Mode –> RGB Color to change the mode.
  3. Create a new layer on top of the background.
  4. Use the paint can tool to fill the new layer with your new color.
  5. Change the layer type from “Normal” to “Color”.
  6. (optional) If the brightness of the image is off now, create a new layer filled with the new color and change the layer type to “Luminosity”.
  7. Save the image for web as a PNG 24.

To change the background color of the higlighted/active submenu item, I changed the background color of line 381 (the “#subnav li a:hover, #subnav li:active” declaration).

You can also edit the navbar.png and navhov.png files to change the main menu.

Changing the Header

To change the logo from an image to plaintext, in the WP admin goto Appearance –> Lifestyle Theme Options and change the Header Blog Title setting from “Image” to “Text”.

You can also edit the file in the /images/psds folder to use an Image logo in the header.

Changing the Body/Page Background Colors

I used the Firebug plugin for Firefox to inspect the original website to find out where certain colors and styles were set in the style.css file.

Using Firebug, I learned that the body’s background color is set on line 19. I changed this color from #E2DDCB to #1462A6.

You could also do a search and replace, but this color was only used in one spot in the style.css file.

Moving inward from the background, the next band of color is actually the border of the “wrap” element. I changed the color of the border declaration on line 35 to #6595BF.

Changing Link and Text Colors

The hyperlink colors are declared between lines 40 and 60.  The lifestyle theme uses the same color for links and visited links. I wanted a different visited color, so I changed that section of code to look like this:

a {
color: #1462A6;
text-decoration: none;
}

a:visited {
color: #6595BF;
}

a:hover {
color: #6595BF;
text-decoration: underline;
}

a img {
border: none;
}

a:focus, a:hover, a:active {
outline: none;
}

To change the article heading link colors, search for “#content h1 a, #content h1 a:visited” and “#content h1 a:hover”. (I changed the colors around lines 586 and 595.)

Hiding the Post Meta (“by”, “posted on”, “filed under”, “tags”, etc)

I hid these using CSS. I added a “display: none;” line to the .date  declarations in style.css on line 779. To hide the tags (postmeta2) section, I add these lines under the .postmeta2 declaration around line 841:

.postmeta p,  .postmeta2 p {
display: none;
}

This will hide everything inside the postmeta2 section, but will still show the bottom border and bottom margin.

Changing the Sidebar

I removed the Blog Roll and Admin sections by commenting out lines 9 through 25 of the sidebar_right.php file in the theme directory.

I then added the following widgets:

  • I added a “text” widget to “Sidebar Top” with some Google Adsense code for a 300×250 ad.
  • I added a “text” widget to “Sidebar Top” with the title “Featured Video” and some embed code from YouTube. (Note: it didn’t seem to matter that the YouTube embed width was greater than 300 pixels. YouTube must size it to fit the page.)
  • I added a “recent posts” widget to “Sidebar Top” with the default settings.
  • I added a “text” widget to “Sidebar Bottom Right” with the title “Advertisement” and some code for a custom 120px x 600px ad.

Updating the Homepage

The first thing we need to do is enable the home.php file as a template for our pages. We need to change this line in home.php:

<?php get_header();  ?>

to:

<?php
/*
Template Name: Homepage
*/
get_header();
?>

Save and upload the file. Now edit the “Home” page in WP and choose “Homepage” as the page template. Save the page.

To choose which blog categories are used for the featured content areas, in WP Admin goto Appearance –> Lifestyle Theme Options. Change the appropriate settings.

To get thumbnails to show up in the featured sections, add a custom field called “thumbnail” pointing to an image (70×70 pixels is good) to use. You can upload these images to the post first and then copy the src url.

To set the thumbnails for the last (bottom) featured section, use “hpbottom” as the name of the custom field.

Setting up the Featured Gallery (Fading Script)

The first step here is to install the “featured content gallery” plugin. (It wasn’t included with my install, but it’s a freely available plugin.) In the WP Admin goto Plugins –> Add New. Search for “featured content gallery”. Install the plugin. Activate the plugin.

Now goto Settings –> Featured Content Gallery and choose either the category or page/post IDs to use for the gallery. You must also set a height and width and text area height in the next section (I used 588 width, 400 height, 100 height for the text). I left the colors as default. Update the settings.

The last thing you need to do is make sure you upload a picture (mine were 588×400) and set a custom field called “articleimg” that points to the URL of the image you want to show up. The gallery will not show up unless you set this custom field.

Click here to get a copy of the StudioPress Lifestyle WordPress theme.

Editing the StudioPress Lifestyle Theme was last updated on June 24, 2009. Bookmark the permalink.

Web Hosting

Over the past year, we’ve helped launch over 20 new or refurbished websites. We’ve used just two hosting companies to host the majority of those sites.

1and1

We use 1and1 to purchase and manage all of our domains. At just ~$7 per year, it’s hard to beat. We also use 1and1’s Linux Business package to host the Stranger Studios website and a number of smaller internal websites using modern web design. For just $9.99 per month, you get 250GB of storage space, 2500GB of bandwidth, and the ability to host up to 100 domains. If you don’t understand those numbers, just know that it is much more than need.

1and1 has great uptime. They offer both MS and Linux packages, including everything up to dedicated servers. In our experience, the packages below “business” level suffer from some performance issues, as there are a large number of websites running on the same server. However, the business packages have been great for sites of our that receive fewer than 1000 visitors per day. For sites that require greater performance or more flexibility, we suggest…

Update: Myriad Network is no more. At least not the Myriad we knew and loved. Seems that they’ve been sold to EMC Telecommunications (though they are not admitting). Ever since, we’ve had nothing but problems. I’m currently looking for new VPS/Dedicated hosting.

Myriad Network

WineLog.net is hosting on a Myriad Network Virtual Dedicated Server. People moving from a regular shared server to a VDS will notice a huge difference in performance. Another reason to look into VDS options is if your application requires databases larger than 100MB (1and1 and other shared hosts limit on MySQL DBs). Our Mobilicio.us application with hundreds of thousands of rows of data zings on a new Myriad Network server. And Myriad makes it easy to scale to multiple servers or larger dedicated servers.

When moving to a VDS, you’re going to have to do a lot more of the nitty gritty at the server level. For our clients, we handle all the nonsense. But even we get confused sometime with some of the more subtle aspects of running a server. In these cases, the Myriad support has been nothing but great with us. They are always timely in their responses and very helpful.

And, yes, those are affiliate links above. For over a year now, we’ve been referring clients and friends to both of these hosting companies without using affiliate links. A little bit of math showed us that we were leaving some money on the table here. Not a lot of money, but maybe enough for a trip to Vegas. So we appreciate your support by using the links above to sign up for these great companies. We wouldn’t recommend them unless we thought they were the best. And they are.

Web Hosting was last updated on October 9, 2007. Bookmark the permalink.

Illustration Inspiration

I’ve been doing some illustration work for a client who is self-publishing a book. I am doing the drawings completely in Photoshop with my handy Intuit Wacom Tablet (I have an older series 2 tablet) (thanks, Dad! – that was a great Christmas).

I’ve probably watched this video below at least 5 times since I started this work. Mike Krahulik, from Penny-Arcade, has mad skills with the pen. It’s a great inspiration, something to aspire to. I learn something every time I watch it. And the music isn’t too bad either (kuh-kuh-kuh Q-Unit!).

The video was first posted at Penny-Arcade on October 11th, 2006. In the blog post, Mike shares some pointers about his brush sizes (all defaults) and techniques. It’s good stuff.

Illustration Inspiration was last updated on December 7, 2006. Bookmark the permalink.

PhotoCrank

I am pleased to finally be able to write about PhotoCrank, a service that adds clever overlays to the photos you snap on your mobile phone. Since mid-August, Kim and I have been helping the PhotoCrank team with their website’s design and development. The secret is out now; their site went live sometime this morning.

If you’re still reading this, you should take a break and check the service out for yourself. (Here’s the link if you missed it the first time: PhotoCrank.com.) From their blog:

PhotoCrank is a fun and easy way for you to add entertaining graphics and customized captions directly on top of your mobile photos. There is no software required. All you need is the camera phone in your pocket, and it works at the speed of a picture message.

Cranking a photo is as easy as sending a “pix message” from your mobile phone to an email address (like try@photocrank.com). A team of leprechauns and fairies, working for minimum wage, will add the crank over top of your image and send it back to your phone. A version is also stored at PhotoCrank.com for archiving and to send mass emails later.
You can 'crank' photos like this with PhotoCrank

Your carrier will charge you their normal fee for sending a picture message. PhotoCrank will charge you an additional $0.20 to $0.30, which is billed to your cell phone, depending on the package you choose. Right now, PhotoCrank’s part of this charge is waved on the first 3 cranks you send.
Jeff and the crew at PhotoCrank are great to work with, and I’m proud of the application they are releasing this week. Kim and I thought the idea was awesome back when it was just a few sketches and a simple prototype. But now that I’m actually able to crank photos from my own Razr and browse through all the cranks on the website, I’m even more excited about things. I can’t wait for my next night out just so I can create more images like this one:

You can

I’m also proud of the design work Kim did on this project. Take a look at how far things have come from the design for the early prototype we built back in July to the final design of the site launched this week.

Kim also did some print work for PhotoCrank, designing this awesome one-sheet they’ll be handing out at the Demo conference in California, where Jeff and the PhotoCrank team will be presenting later this week. (Be sure to check them out there if you are attending or keeping tabs on that event.)

I have a minute, so I’ll throw in a little praise for myself. The original plan was to handoff a static HTML wireframe, with just the HTML, CSS, and JavaScript components programmed. Jeff and Paul were busy jumping hoops for the phone companies and tweaking PhotoCrank’s porn filter however, so I brushed off my VB and ASP.net skills and helped out with some of the server-side programming. For a couple of weeks, I moved shop over to the PhotoCrank office where I got busy, did some .net development, ate as much as 1 1/2 cheese steaks each day, and brushed up on my devil-sticks skills.
Again, I can’t emphasize how great Jeff, Paul, Cristyn, Yoni, and the others behind PhotoCrank are. This is just the beginning for them. I know they have a lot of plans for their product, and I look forward to working with them in the future.

PhotoCrank was last updated on September 25, 2006. Bookmark the permalink.