We build our sites with a custom theme options panel in the Dashboard so that clients can manage as much of their site on their own as possible. All seemed fine and dandy until the client threw in an apostrophe! The chutzpah. Can’t you just use “We will” instead of “We’ll”?

The problem was that when an apostrophe was entered into a custom text label in the options panel, a slash decided to come along for the ride. Example: Instead of seeing “We’ll send you a link”, the site displayed “We\’ll send you a link”. I searched around and finally found this post, Using stripslashes() with Theme Options which explains that you need to use the stripslashes function when you return the content stored in the custom text.

Basically, you just wrap stripslashes() around the get_option like so:

If you had <?php  echo get_option(‘cgn_404_text’); ?>

it would now be:

<?php  echo stripslashes(get_option(‘cgn_404_text’)); ?>

In your custom-text.php file, you’ll probably use something like this:

This post was originally published at How to fix apostrophes turning into slashes in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

We developed a site that has really rich subpages (child pages) but the parent page is mostly a blank placeholder that directs people to the subpages. Instead of merely leaving a blank parent page, we wanted to give a preview of the content on each of the subpages. I found the code for how to do it in this post, Display title & excerpt of child pages.  

get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); ?>

This post was originally published at How to list subpages with a title and excerpt in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Several of our clients requested that we add popup disclaimers before someone sends an email to the site admin or before they submit a comment. Here’s a screenshot of what we’re going to do:

Case 1: Add a Contact Us link to the navigation menu that triggers a disclaimer popup.  
Once a visitor clicks OK, open the visitor’s email client using the mailto: function.

1. In the WordPress dashboard, go to Appearance > Menus and add a custom link. 
    
2. Go to Screen Options and make sure the “CSS Classes” checbox is checked
3. In the URL field, put mailto:youremail@yoursite.com 
4. In the CSS Class, put show-confirm-popup
5. Open up header.php
6. Check to see if you already have the jQuery library loaded on your site. If not, add the following somewhere between the opening and closing head tags 

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

7. Add the following code between the opening and closing head tag. Make sure to change the text of the disclaimer.

   <script type="text/javascript">$(document).ready(function(){ $('.show-confirm-popup a').each(function(){ $(this).click(showConfirmPopup); }); }); function showConfirmPopup(){ var confirmation_text = 'Change this text. By clicking "OK," you agree that you have read and understand this notice.'; return confirm(confirmation_text); }   $(function(){ }); </script>

  Case 2: Add the popup disclaimer to any link.  

1. Add the following link structure anywhere on your site.

   <a onclick="return showConfirmPopup();" href="mailto:youremail@yoursite.com">Contact Us</a>; 

2. Copy the code from Step 6 and 7 from Case 1 above into header.php.

Case 3: Add the popup disclaimer before a comment is submitted

1. Open Comments.php
2. Do a search for the word “submit”
3. Add the onClick parameter to the Submit button. It will look something like this:

   <input name="submit" type="submit" id="submit" tabindex="5"   value="Submit Comment" onClick="return showConfirmCommentPopup();" />

4. Copy the code from Step 6 and 7 from Case 1 into header.php and also in header.php, add the following function. Remember to change the text.

   function showConfirmCommentPopup(){ var confirmation_text = 'Change this text. By clicking "OK," you agree that you have read and understand this notice.'; return confirm(confirmation_text); }  

    

Big thank you to Elisha!

This post was originally published at Disclaimer popups before sending an email or submitting a comment using simple jQuery in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

It seemed so simple and straightforward to link an author’s image to their page of previous posts like http://wpgarage.com/author/Rebecca/. But for some reason I couldn’t find the solution easily with the default WordPress template tags. Template tags that I had used last time I needed this functionality were deprecated.

Here’s what I did:

1. First, I set up the author image using the Author Image plugin to give our client an easy way to manage thumbnails of each author from the user’s profile settings.
2. Then I started looking for a way to link the author’s image to their archive. When I couldn’t find an easy answer in the WordPress template tags, I remembered that WPGarage has that feature in the footer area of each post! So I checked out the code of WPGlide theme (the theme we use on this site by Solostream), found the code I needed and modified it.Here’s the code I used:

<a href=”<?php bloginfo(‘url’); ?>/author/<?php the_author_meta(‘user_login’); ?>/”> <?php the_author_image(); ?> </a>

This post was originally published at How to link author image to their previous posts in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Recently, a client asked us to allow editors to add users on their WordPress site. They wanted this feature so that the site managers wouldn’t be tempted to click on any of the settings, and possibly mess something up. I know this is super specific but it did come up for us so maybe it will be relevant for you.

Here’s what I did:

1. Install and activate the Members Plugin
2. Go to Settings > Members Components and activate the Edit Roles component
   
3. Go to Users > Roles. Click on Editor. In the options panel, check off create_users, edit_users, and delete_users.
   
4. Add this code into your funcitons.php file.
5. Test it out.
6. That’s it.

This post was originally published at Allow Editor access level to add users in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Recently, I wrote about how WordPress users can easily add media like YouTube videos to posts and pages by just inserting the URL of the page the media is on. But that functionality was limited to sites that are oEmbed providers. We are still left with the problem of not being able to insert non-oEmbed iframes in WordPress, like Google Forms for example. If you try to insert a Google Form in the WordPress editor, you may find that all of the HTML is stripped out and you’re just left with a lonely “Loading…” on your page.

Well, there’s a solution. There’s an awesome thread on WordPress StackExchange with a collection of code for the functions.php file, including the following:

// make TinyMCE allow iframes
add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]"; return $a;') );

Copy and paste the code into your WordPress functions.php file, and now you can embed any ol’ iframe you want in your WordPress editor, and it won’t get stripped out!

Happy embedding!

This post was originally published at The ultimate guide to embedding HTML and iframes in WordPress – part 2 on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Recently I was working on a client’s WordPress website and he made an interesting request, that I am actually surprised we don’t see more often. He wanted the top links on his navigation bar to not be live links, and only the sub-pages should actually link to pages on his site.

In this case the top page on the navigation bar was called Galleries, which is the parent page for sub-pages with galleries for wedding photos, wedding videos etc. He didn’t want a main galleries page, but instead he wanted it to be a kind of folder for categorizing the various galleries he was going to have on other pages in his site.

Since we are using wp_list_pages, we can’t unlink each page on an individual basis since the navigation bar is dynamically formed. So I needed some way to keep using wp_list_pages so that the client can control the navigation bar, but unlink the top Galleries page.

I found the answer on what I think is one of the best forums around of internet and computer experts and people who are eager to help one another: Digital Point.

After a few suggestions from people on the forums, I finally got an answer from the awesome bvraghav.

In the header.php section of the file I embeded a javascript code that looked like this:

<script type="text/javascript">
jQuery(function($) {
$("li.page-item-283").children("a").attr('href', "javascript:void(0)");
});
</script>
<script type="text/javascript">jQuery(function($) {    $("li.page-item-283").children("a").attr('href', "javascript:void(0)");});</script>

This is how it works:

• The  jquery (a javascript framework) is used to replace the value of href property in the required html node ( <a href=”your-galleries-link”>…. </a> in this case) with “javascript:void(0)”.  Looks like this:  jQuery(function($) {

• The following code selects the li element with: $(“li.page-item-283″). In this case 283 the page number that we want to void the link for (in our case the top Galleries page).

• The next part is the  children function which selects all immediate children with tag a: children(“a”) . This relates the child pages to the gallery pages and keeps their links.
  

• After this I had to change the attribute href to “javascript:void(0)”, which looks like this:  .attr(‘href’, “javascript:void(0)”); This turns the gallery link into void so it won’t direct anywhere.
  

All this comes together to look like the code above.

If you want to make all top level links unlinked, use the following code:

<script type="text/javascript">
jQuery(function($) {
    $("li.page_item").children("a").attr('href', "javascript:void(0)"); });
</script>

What I’m wondering is if the new WordPress navigation system allows users to include items in navigation bars that don’t actually lead anywhere. Anyone know?

This post was originally published at How to remove the link to parent pages when using wp_list_pages in WordPress navigation on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

This post was originally published at Automatic Plugin Upgrade broken after WordPress 2.9.2 and some fixes on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

We recently launched a site called theforgottenletters.org, an incredible project dedicated to translating the Holocaust-era letters of Ralph Schwab from German to English. While building the site, we needed to archive the letters based on the dates the letters were written, not when we publish them to the site.

First, I tried this tutorial: How To Make a WordPress Events List and calendar plugins, but the tutorial wasn’t comprehensive enough and the plugins were too complex to start messing with.

The solution

I found this wonderful date field plugin which lets  you sort posts by the date entered in the custom fields.  Here’s what I did:

1. Upload the plugin and activate it

2. Opened the lettersarchive.php page template I created and added a query. The query checks for posts in the Letters category that have a date filled in and the orders it from oldest to newest.

<?php query_posts(‘category_name=letters&meta_key=date_value&orderby=meta_value&order=DESC’); ?>

3. I replaced a typical date function within the loop <?php the_time(‘j M Y’); ?> with

<?php echo date(“l jS \of F Y”, get_post_meta($post->ID, ‘date_value’, true));?>

4. I created a new post,  assigned it to the Letters category, and selected a date from the date picker box that now appears below the editing box in the post area.

I noticed that the Date Field plugin only lets you select a date up to 5 years ago  so I had to hack the plugin file on line 125 to  reflect selecting dates from 80 years ago.

for($currentyear = date(‘Y’) – 80; $currentyear <= date(Y) +5;$currentyear +=1)

Here’s a screenshot of the archive from The Forgotten Letters site.

This post was originally published at How to create an archive based on custom fields, not publish date in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Recently, I needed to list all subpages of a parent page.  I also needed to display custom fields below each subpage. And, on top of that, the list needed to be 2 columns.

I found a solution for simply listing the pages in 2 columns, but it did not suggest how to modify the code to include custom fields.

So, thanks to our coding hero Mark Kaplun who supplied the below code, although he admits it’s a “dirty hack”. The sort_column is so that MyPageOrder would work properly for this listing.

<?php
$args = array(
‘post_type’ => ‘page’,
‘numberposts’ => 40,
‘sort_column’ => ‘menu_order’,
‘child_of’ => 84 // any parent
);
$attachments = get_pages($args);
//print_r(“attachements:” . $attachements);
echo ‘<div style=”float: left; margin: 0 10px 0 0;”>’;
?>

<?php
for ($i =0; $i<count($attachments)/2; $i++) {
$post = $attachments[$i];
//    foreach ($attachments as $post)  { ?>

<a href=”<?php echo get_permalink($post->ID) ?>” rel=”bookmark”><?php echo $post->post_title; ?></a>
<?php if(get_post_meta($post->ID, “NameofCustomField”, true)) { ?>
<?php
echo get_post_meta($post->ID, “NameofCustomField”, true);
}
?>
<?php } ?>
</div>
<?php
echo ‘<div style=”float: left; margin: 0 10px 0 0;”>’;
for (; $i<count($attachments); $i++) {
$post = $attachments[$i];
//    foreach ($attachments as $post)  { ?>

<a href=”<?php echo get_permalink($post->ID) ?>” rel=”bookmark”><?php echo $post->post_title; ?></a>
<?php if(get_post_meta($post->ID, “PracticeArea”, true)) { ?>
<?php
echo get_post_meta($post->ID, “PracticeArea”, true);
}
?>
<?php } ?>
</div>

This post was originally published at How to list Pages with custom fields in 2 columns in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.