Archive for Tutorials

Speed Up Your WordPress Site with .htaccess and GZIP

In a recent iThemes Training webinar, I explained the importance of adding several lines to the .htaccess file that will instruct your web server to deliver content that has been deflated by GZIP rather than sending it uncompressed by default.

Warning: making changes to the .htaccess file can create major problems for your website. You should know what you’re doing before you attempt these additions.

Here is the code that was mentioned:

<IfModule deflate_module>
<IfModule filter_module>
AddOutputFilterByType DEFLATE text/plain text/html
AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
</IfModule>
</IfModule>

In most cases, this simple addition should speed up your website. Also, if you host multiple sites on the same server, making this change once in the root directory should make the change apply to all subfolders/subsites as well.

When Facebook isn’t using the Featured Image for your WordPress Post

Annoying, Isn’t It?

I hate it when things beyond my control affect my clients’ web sites. Facebook is too-often one of those things. So when I received an email this morning from a client stating that Facebook wasn’t using his post’s featured image but was pulling other images from the site instead, I wasn’t surprised. But finding a solution to these issues is another matter.

The Featured Image Was Correct

My first suspicion was that the client hadn’t correctly set the featured image, or had forgotten to update the page after the image was set. Yet, upon inspection, the featured image existed and was displaying properly on the web site. Yet when I posted the URL to the post on the client’s Facebook page, only two image options were available. They happened to be from the front page and neither of them was the correct featured image.

So, on to Google… and the Diagnosis

After some time searching, I discovered the reason why this was occurring.  Apparently, my client had initially published the post without a featured image. We use the Social plugin from Mailchimp/Crowd Favorite to automatically post his blog articles to Facebook. So Facebook did what it was supposed to. It grabbed a couple of images from the front page and offered those as options for the post. However, when the featured image was added later, Facebook continued to insist that only those two image options could be used. Here’s why…

When a post or page is shared on Facebook, it stores the images from that URL in its own cache to use in the future. Facebook is not going to look at that URL again for different images until their cache expires. And nobody outside Facebook really knows how long that will be (hours? days? weeks? months?). But there is a way to fix it…

The Solution

There is a little-known tool provided by Facebook that allows you to force it to look at your page or post again and refresh the Facebook image cache for that URL. Here it is:

http://developers.facebook.com/tools/debug

Add your URL in the box at the top of the page and Facebook will scan it for the new image to share and give you a preview of what your post/share will look like at the bottom. In my experience, you sometimes must submit the page more than once to get the correct image to show up. But in the end, it will, and your featured image will shine.

Restricting WordPress Search to Titles Only

Yes, WordPress search leaves a lot to be desired. But with some tweaking, you can get the results you want.

Why would you want to do that?

In a recent project, the client requested that WordPress search return only hits from page titles and ignore page and post content. Why would they request this, you might ask? In a site that is heavily optimized for SEO, a popular keyword search might return dozens of hits that are not really what the user needs to see. By restricting search results to page or post title only, many extraneous matches can be filtered out.

Certainly opting to restrict searches to title only can hinder search capabilities as well. It should be used sparingly and only on sites that have been written with SEO keywords in mind.

The Code

Adding the following code to your active theme’s functions.php file will restrict WordPress search results to page and post titles only.

//Limit Search to Post Titles Only
function ni_search_by_title_only( $search, &$wp_query ){global $wpdb;
if ( empty( $search ) )
return $search; // skip processing - no search term in query
$q = $wp_query->query_vars;
$n = ! empty( $q['exact'] ) ? '' : '%';
$search =
$searchand = '';
foreach ( (array) $q['search_terms'] as $term ){$term = esc_sql( like_escape( $term ) );
$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
$searchand = ' AND ';
}if ( ! empty( $search ) ){$search = " AND ({$search}) ";
if ( ! is_user_logged_in() )
$search .= " AND ($wpdb->posts.post_password = '') ";
}return $search;
}add_filter( 'posts_search', 'ni_search_by_title_only', 500, 2 );

Excluding Certain Particular Pages from WordPress Search

If you want to further tweak your search results, you can manually exclude certain pages from being returned by WordPress search by using the code below. FYI, this code is not related to the code above and can be used independently of it. It should also be added to the functions.php file in your active child theme.

function ni_search_filter( $query ){if ( $query->is_search && $query->is_main_query() ){$query->set( 'post__not_in', array( 80, 147, 13 ) );
}}add_filter( 'pre_get_posts', 'ni_search_filter' );

You will need to add the specific page or post IDs you want to eliminate from search on line 3 of the code above.

If you don’t know how to find the ID of a page or post, install the Simply Show IDs plugin which displays ID numbers on the page and post list screens. By the way, don’t let the fact that the plugin hasn’t been updated in a while dissuade you. If a plugin works, there’s not need for it to be updated.

How to Make a Scrolling Back to Top Link in WordPress

So you have a site that has lots of long pages or posts. What do your users do when they get to the bottom? Scroll back to the top with the scroll bar or maybe their mouse wheel? Psh. How 2004! Here’s a bit of code that will allow you to make an autoscroll link back to the top of your page like you see implemented on this site.

There is also an article on this concept in the iThemes Builder Community with slightly different code. I added a few tweaks of my own…

The jQuery Code

<script type="text/javascript">// <![CDATA[
jQuery('.backtotop').click(function(){jQuery('html, body').animate({scrollTop:0}, 'slow');
});
// ]]></script>

Basically what this code does is tell anything that has the backtotop class (line 2) to become a clickable link that scrolls the page to the top with a nifty animation (line 3).

This code goes just before the </body> tag in your theme files. Or, if you’re using the awesomeness that is iThemes Builder, you can just paste it in the box on the setting page like so:

The HTML Link

Now all you have to do is add the following div that has the class backtotop as mentioned above wherever you want people to click.

<a class="backtotop" href="javascript:void(0)">Back to Top</a>

What we’re doing here is creating a link that goes nowhere and giving it the backtotop class so that it gets the jQuery effect applied to it.

The Result

Back to Top

Adding the Link to Every Page

Unless you’re using the magic of LoopBuddy (keep reading),you’ll have to add the link to your template files. Edit your page.php (or single.php for posts) and add the HTML code above to just after the php the_content area. You’ll need to tweak this depending on your theme. You can also tweak the HTML to your heart’s delight as well.

Adding the Link to Every Page with LoopBuddy

If you’re not using Builder, you’re probably not using LoopBuddy either, which is probably one of the sweetest tools to come along in a while for WordPress developers. If you don’t know about LoopBuddy, go here.

With LoopBuddy, we can create a layout that includes our Back To Top link from above and apply it to every page (and post if you want) automatically.

Step One: Create a LoopBuddy Layout for a Default Page

In the graphic below, I created a layout called “Page Default” which contains just the title and content. Those are there by default. Then I simply added the HTML code from above into the Post-Loop / HTML box. That will cause the HTML code to show up at the bottom of any page or post we apply this layout to.

Step Two: Apply the Layout to Pages by Default

Now we want to tell LoopBuddy to use that Default Page layout as (you guessed it) the default Page layout for our site. We do this in the settings area in a simple pick list:

Once you save the settings, your site should begin to display theBack to Toplink at the bottom of each page.

Repeat the LoopBuddy process to have it display on  your posts as well (you’ll have to do this separately unless you just want Title and Content for your posts).

How to Create an Automatically Updating Date Icon in WordPress

This is the first of several How To posts based on features of the World Reach web site I released in June 2012.

At the top of the sidebar of most pages of the site is a link to download the mission organization’s monthly prayer calendar. This link does a number of interesting things thanks to some nifty php code. First it shows the current date in the time zone of the organization’s headquarters. Second, it actively links to the correct month’s PDF calendar without any intervention on the part of their office staff.

Here’s how to create it.

Step One: Install the PHP Code Widget

Since PHP code will not execute in the standard WordPress text widget (which will only render HTML),you’ll need to install a widget that will allow it. I like Otto’s tried and true PHP Code Widget in the WordPress Plugin Repository.

Step Two: Insert the PHP Code in the Widget

Below is the code I’ve used to render the calendar icon and below that will be the explanation of what the various parts of the code mean.

//Render the Month
<div class="prayer-calendar-month">
<?php date_default_timezone_set('America/Chicago'); echo date('M'); ?>
</div>
//Render the Day
<div class="prayer-calendar-day">
<?php date_default_timezone_set('America/Chicago'); echo date('j'); ?>
</div>
//Render the Link
<div class="prayer-calendar" style="cursor: pointer;"
onclick="Javascript:window.open('http://world-reach.org/pdf/Prayer-Guide/
<?php date_default_timezone_set('America/Chicago'); echo date('m'); ?>-
<?php date_default_timezone_set('America/Chicago'); echo date('Y'); ?>.pdf');">
//Render the Text
<div class="prayer-calendar-text">Download the<br />
<?php date_default_timezone_set('America/Chicago'); echo date('F Y'); ?>
<br />Prayer Calendar
</div>
</div>

Render the Month

  • The div class prayer-calendar-month is important because we will use it to style and position the month text on the calendar icon with CSS.
  • date_default_timezone_set(‘America/Chicago’) is present to set the time zone of the date the code will render to central time. That’s important because PHP will use GMT unless you tell it otherwise. For a complete list of php time zone codes, click here.
  • echo date(‘M’) renders the current month in its 3 letter abbreviation. You can also render months in full (like January) or as its numerical equivalent (like 1 or 01). A letter code (like the j used here) tells PHP how you want the date to render. Here is a page that explains the letter codes and what they mean.

Render the Day

  • Again, the div class prayer-calendar-day is important for styling and positioning in the CSS that we’ll do in a moment.
  • Again, the date_default_timezone_set makes the date render in central time.
  • echo date(‘j’) renders the day of the month as a digit.

Render the Link

  • To make management of the Prayer Calendar easier for the office staff, I have set up the link to automatically update to the current month and year. The staff simply uploads a PDF named month-year.pdf (like 06-2012.pdf) to a specific location and the sidebar calendar will automatically link to the correct PDF. Also, this allows the staff to upload calendars months in advance and the link will always give the correct month.
  • The div class prayer-calendar will allow us to make the entire div clickable to the PDF link.
  • style=”cursor: pointer;” makes the mouse pointer change from an arrow to a finger when over the clickable div. Otherwise, the mouse will stay an arrow and users will not know the area is clickable.
  • onclick=”Javascript:window.open makes this div clickable and opens the link in a new window (tab).
  • The link renders as http://world-reach.org/pdf/Prayer-Guide/(month)-(year).pdf. We get the current month and date with the same echo date functions used earlier.

Render the Text

  • Again the div prayer-calendar-text will be used to help position and style the text for the sidebar widget.
  • The text has PHP that echos the current month and year: Download the (Month) (Year) Prayer Calendar. The F and Y are php date letter codes for the full month name and 4 digit year.

Step Three: Style the Output with CSS

The CSS for the date icon is below with explanations of some of the more important parts below. In order to make this work, you’ll need a calendar background icon. I have placed the icon I used for the World Reach site here to the left. Many others can be found with a Google images search like this one.

.prayer-calendar {
border: 1px #3A5275 solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 135px;
margin-left: auto;
margin-right: auto;
margin-top: -60px;
background-color: #F9F9F9;
background-image: url(/icons/Calendar2.png);
background-repeat: no-repeat;
background-position: 8px 8px;
padding-left:65px;
box-shadow: 0 0 4px 2px #DEDEDE;
height: 65px;
}.prayer-calendar-month {
position: relative;
font-size: .65em;
font-weight: bold;
color: #fff;
top: 12px;
left: 23px;
text-transform: uppercase;
text-align: center;
width: 50px;
}.prayer-calendar-day {
position: relative;
font-size: 2em;
font-weight: bold;
color: #000;
top: 3px;
left: 23px;
text-align: center;
width: 50px;
letter-spacing: -2px;
}.prayer-calendar-text {
line-height: 1.2em;
font-size: .75em;
text-transform: uppercase;
font-weight: bold;
text-align: center;
padding-top: 10px;
}

.prayer-calendar

  • background-image: This places the calendar icon as a background image for the div
  • no-repeat: insures that the calendar icon displays only once and does not repeat across the div
  • background position: pushes the calendar icon 8px down and 8px to the right to give it a little spacing from the border
  • padding-left: pushes the rest of the contents of the div 65 px to the right so that the calendar icon is not covered up

.prayer-calendar-month and .prayer-calendar-day

  • position relative:basically allows us to do the specific positioning top and left we’re going to do below. If you don’t set position to relative, the top and left won’t work.
  • top and left:pushes the month text 12px down and 23px to the left of where it would have been rendered. This places the month text exactly in the blue strip of the calendar icon. I found that position by (lots of) trial and error.
  • width: this sets the width of the div for the month and day to the same width as the icon so we can center the text on the icon itself with text-align center.

.prayer-calendar-text

  • Nothing special here. This just styles the appearance of the “Click here to download…” text.

 

How to Make the WordPress Editor Look Like Your Web Site

Why doesn’t the font match?

I can’t tell you how many times I’ve had clients ask that question when using the WordPress Visual Editor for the first time. They simply can’t understand why they have to enter text in the antiquated “Georgia” font and why it looks different when it actually appears on their site. Answering their question requires a lengthy explanation that delves into the principles of a content management system and why it’s important to separate the content of a web site from it’s style… blah, blah, blah. Then I get the deer in the headlights look and the answer gets simplified to the time-tested response of a frustrated parent to a petulant child: “Because I said so.”

Yeah, but why doesn’t the font match?

WordPress has for years made the decision that the default font for the Tiny MCE Visual Editor would be Georgia. I have no explanation why. It’s not exactly a modern font. After some digging, I found the font for the visual editor is controlled by a css file buried deep in the recesses of WordPress. To be precise: wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. On line two of that file, you’ll find the font settings, which default to Georgia, for whatever reason.

Getting Georgia out of your Visual Editor

The key to liberating your visual editor from the travesty of Georgia is to create a file that defines the styling that’s used. This file is called editor-style.css and it’s not part of the default WordPress installation. It’s theme-based. But just two quick steps will allow you to be rid of this problem once and for all.

Step One: Add Your Own editor-style.css File

What I usually do is create a file in my child theme folder called editor-style.css. Then I copy and paste the typography section of the existing style.css file in my theme into that file and save it. I’ll grab the styling for paragraphs, headings, blockquotes, buttons, etc… anything that would show up in the content area.

Step Two: Tell WordPress to look for the editor-style.css file

Just adding the editor-style.css file to your theme folder will not make the change on its own. You need to add the following code to your functions.php file to tell WordPress to look for changes you just added.

// Styling the visual editor with editor-style.css to match the theme style.
add_editor_style();

Save your changes and reload your editor and you’re done! In two easy steps, your Visual Editor should now be pulling in the styling form the front end of your web site.

Nifty, huh? And now truly WYSIWIG.

The best part? No more having to explain why the font doesn’t look the same!

How to Fix the “Your Cart is Empty” Error in Cart66

Your Cart is Empty

I love Cart66 for its elegant simplicity and the fact that it just works. Cart66 brings usable eCommerce to WordPress. But recently, I ran into a recurring problem on a client’s web site that was breaking the checkout process.

A customer would add a product to cart, but when they went to checkout, Cart66 would return the error “Your Cart is Empty.” After a bit of research, I found the answer on the WordPress Support Forums.

Cart66 is Incompatible with Site Caches like W3 Total Cache

Now, I’m a pretty easy guy to get along with, and it takes a lot for me not to be able to get along with someone. But from time to time I’ve run into a situations where two people I genuinely like can’t stand each other. That has always mystified me. I like you both, why don’t you like each other. It turns out, that’s a bit like what was happening on this site. Two of my favorite plugins, Cart66 and W3 Total Cache, just can’t get along.

According to Cart66’s developer, “If you have a caching plugin running you will run into all sorts of odd problems. So do not run a caching plugin, or at least, don’t cache your shopping cart pages.” The issue seems to happen because the caching plugin is caching the view cart page of a previous visitor. So that when the next visitor tries to check out, the previous visitor’s view cart page is shown to them. This, of course, just won’t work.

But, thankfully, the solution is as simple. Just turn off caching or set your cache not to work on shopping cart pages.

How to Add Easy Social Icons in the WordPress Navigation Menu

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.

Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.

If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.

Here’s the Video:

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn on CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

.menu-twitter {
text-indent: -9999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}

Here’s an explanation of the code:

  • The .menu-twitter class is what we added to the custom menu in step four.
  • Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
  • Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
  • Background-Repeat ensures that the icon only displays once.
  • Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
  • Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like http://yourdomain.com/social) then change the link in the css for the icon to this new location as below:

background-image: url(http://yourdomain.com/social/twitter.png) !important;

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

– – – – – – UPDATE 5/31/2012 – – – – – –

Opening Links in a New Window

To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.

Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:

Easy Random Background Images for WordPress

Here’s a fantastic little solution I found from Dan Benjamin that allows you to drop a simple php script in a folder of images to display them at random. This code is really light and works perfectly in all my tests.

I’m using it to randomize background images on the content module of an iThemes Builder site. You can also use it to display a random image from a folder in a post as well. Yes you can do this with something like NextGen Gallery, but a simple solution like this is better if you don’t need all the features of a full gallery plugin.

Here’s all you have to do…

  1. Save the code below or copy and paste it into your text editor of choice.
  2. Save it as rotate.php (or whatever you want to call it) into a folder of images on  your web site.
  3. Add the script like you would add an image.  <img src=”path-to-your-images/rotate.php”> or for a background in css, add this to the element background-image: url(path-to-your-images/rotate.php);

Here’s an Example:

The picture below is randomly generated from the images in an upload directory of this site. Hit refresh to see it randomize.

Now Here’s the Code…

Note: I’ve removed all the commenting to make the code shorter. If you want to see the comments, view Dan Benjamin’s original article here.

<?php
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/'){$folder = $folder.'/';
}if (isset($_GET['img'])){$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
){$img = $folder.$imageInfo['basename'];
}}else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ){$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
){$fileList[] = $file;
}}closedir($handle);
if (count($fileList) > 0){$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}}if ($img!=null){$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
}else {
if ( function_exists('imagecreate') ){header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}}?>

Supercharge WordPress with LoopBuddy + Custom Post Types

This is my first shot at a video tutorial. I’m brand new using ScreenFlow and the mic is just the one on my MacBook Pro. Hopefully, I’ll get better over time. Also, if you benefited from the video and do not own LoopBuddy or a WPMU membership, please use my affiliate links below if you plan to purchase. Thanks!

Resources used in the video:

Very Important Note:

When you create your Custom Post Type, be sure that you do not name the slug of your CPT the same as the slug of the page that it will be displayed on with LoopBuddy. If you do, all manner of badness will occur, including a potential breach of the space-time continuum. So, don’t cross the streams, Venkman.

Here is the CSS that was pasted:

/*Book Grid */
.books-grid {
width: 125px;
height: 250px;
float: left !important;
display: inline !important;
padding-right: 15px;
text-align: center;
}.hentry {
border-bottom: 0px !important;
margin-bottom: 0em !important;
}.books-grid-image {
margin-left: 5px;
}.books-grid-title {
line-height: 1;
font-size: .8em;
font-style: normal;
width: 125px;
}/*Books Detail Page*/
.books-detail-title {
color: #A87F10;
font-size: 1.25em;
font-weight: bold;
line-height: 1.3em;
text-align: left;
}.books-detail-author {
padding: 15px 0px;
}.books-detail-image img {
margin: 0px 10px 15px 0px !important;
float: left;
}.books-detail-return {
text-align: center;
background-color: #DAD8D9;
padding: 5px;
display: block;
margin: 75px auto;
width: 50%;
border: 1px #888 solid;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

Grid Items Not Gridding?

If your posts are not displaying in a grid, try putting the float on the .hentry rather than the .books-grid. I’ll betcha that will work.

Using Custom Post Type UI instead of CustomPress

Custom Post Type UI will not allow you to create custom fields by itself, which makes doing what this video describes impossible. However, a nifty little plugin called More Fields will allow you to add custom fields to Custom Post Types and gives you the kind of control over what they look like (single line text, textarea, etc) that CustomPress does. One day I’ll make a video demonstrating this process. But it’s pretty straight forward:

  1. Create your custom post type using Custom Post Type UI
  2. Add custom fields to your custom post type using More Fields
  3. Put the custom field key you created in step 2 in LoopBuddy’s custom fields item.