From the Blogabout me

Removing /index.php/ from WordPress URL’s

Occasionally, I have clients ask why their URL’s for WordPress have changed or maybe they moved from one hosting provider to another and they now see /index.php/ in their URL.  This does not only pertain to WordPress though, as it could affect other Content Management Systems (CMS) or even general software.

Recently I was helped setup a person who had moved their WordPress site and a great billing/time tracking online system, that I encourage you to look into, called Pancake from Hostgator to InMotion. But once everything was moved over they noticed this issue in all URL’s and it caused Pancake to really act up without being any issue with Pancake itself, and just made WordPress links look ugly.  So that’s when I realized it was time for me to do a quick walk-through on how removing/index.php/ from WordPress URL’s without a plugin being needed.

So I want you to go into your .htaccess file within the root directory of your website. Open it with your favorite text editor, and make sure this information is there and at the top of the file. Save and put back on the server.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]
</IfModule>

Note, if you are using Rackspace, you may need to add a little more code:


<IfModule mod_rewrite.c>
Options +FollowSymlinks
# Options +SymLinksIfOwnerMatch
RewriteEngine On

# On some hosts (including Rackspace), you need to remove the "#" that comes before RewriteBase to avoid 404 errors:
# RewriteBase /

# Block access to hidden files and directories.
RewriteCond %{SCRIPT_FILENAME} -d [OR]
RewriteCond %{SCRIPT_FILENAME} -f
RewriteRule "(^|/)\." - [F]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]
</IfModule>

I realize this is not the most exciting topic, nor the easiest to explain, so if you have any questions please let me know.

Contact Form 7 Confirmation Message Tip

Do you use Contact Form 7 for WordPress? If so, this quick tip will be helpful for you.

A number of my clients as for customizations and tweaks to be done to the plugin to make it function a little differently than the default, but there is one customization that is hidden but anybody can do.

Success Message Position

Many of my clients who use Contact Form 7 ask about the success message. So if you have ever wanted to move the Contact Form 7 Confirmation Message from the bottom of the form to anywhere else on the form, it may be much easier than you think. Just add the
[response]
shortcode to your form where you want it to display.

Let’s just say you have a form that requests First Name, Last Name, Email Address, and a standard Text Box. A form like that, will look something like this:

Generic Contact Form 7 Form

And your backend Contact Form 7 form settings and layout would look something like this:

<p>First Name (required)<br />
[text* first-name placeholder"First Name"] </p>
<p>Last Name (required)<br />
[text* last-name placeholder"Last Name"] </p>
<p>Email Address (required)<br />
[email* your-email placeholder"user@domain.com"] </p>
<p>Message (required)<br />
[textarea* your-message] </p>
<p>[submit "Send"]</p>

Good so far? Now if you were to click send right now you would get a little confirmation message on the screen that says something generic and it would be at the bottom of the form:

Generic Standard Contact Form 7 Message

This is pretty and everything, but we have a problem… Maybe your form is too long or you think your visitors will not see the confirmation… Now what?


The fix:

There is a built-in feature that is not shared by the developer very well, but is very useful. Simply add in the shortcode [response] wherever you would like the success message to be displayed after clicking Send and it will display there.

<p>[response]</p>

<p>First Name (required)<br />
[text* first-name placeholder"First Name"] </p>
<p>Last Name (required)<br />
[text* last-name placeholder"Last Name"] </p>
<p>Email Address (required)<br />
[email* your-email placeholder"user@domain.com"] </p>
<p>Message (required)<br />
[textarea* your-message] </p>
<p>[submit "Send"]</p>

The Success Message is going to be at the very top of the form now

New placement of Contact Form 7 Success Message

Meta Refresh vs 301 redirects (.htacess) ?

Lots of people ask me what the difference between using the Meta Refresh tag verses using the .htaccess 301 redirect function is, so I am here to explain their differences.

So what is the Meta Refresh Tag?

Mostly people want to use this in the <head> section of their webpage to redirect to a different page/site.  For instance, let’s say you had a page that once lived at domain.com/awesome.html but now it is actually located at domain.com/pretty-cool.php.  It may be hard to reach out to all of your visitors, or you have a great search ranking you don’t want to mess up.  You can go into your old page file and add something like this:


<head>
<meta http-equiv="refresh" content="0;'http://domain.com/pretty-cool.php'" />
</head>


This now lets your visitor go straight to the new location without them having to think.  So far so good, right?  Not exactly…

Biggest problem with Meta Refresh is lots of sites use this method to redirect you to rogue or completely different sites.  You probably don’t want your visitors, or Google, thinking you are trying to send your visitors to some completely different place.  You can do this for a short period of time as a bandaid, but I definitely would not recommend it for a long period of time.

So, what do you do instead?



301 Redirect

This is to tell your site, users, and Google you are permanently changing the location of the page.  Most importantly it tells all search engines “hey, the website or page has moved – please don’t hurt me, just look over here now.”

How to do a 301 Redirect is pretty simple.

Open your .htaccess file (or create one) found in your root directory and add a new line:
Redirect 301 http://domain.com/awesome.html http://domain.com/pretty-cool.php
If you want to redirect entire site to a new site, and not just files, you can do this:
Redirect 301 / http://domain2.com/
Save the .htaccess file, make sure it’s on your site, and you are done.

 

Different types of Redirects:

301 = permanent

302 = temporary

 

Genesis 2.0, WordPress 3.6, and Superfish

If you have upgraded your WordPress site to WordPress 3.6 or higher recently and/or upgraded your Genesis theme-work to Genesis 2.0 or higher, you may have noticed something very unusual with your drop-down menus.

They no longer work!

Oh no – why is that?

Superfish/Suckerfish has been good to use developers and designers for some time, but let’s face it.  It’s getting old and doesn’t serve the needs for today’s websites as much as before.

Superfish, in case you didn’t know, is not a ginormous ancestor to the swordfish family but instead a jQuery ancestor to Suckerfish, to make drop-down menus work smoothly and without much code.  It has served thousands of developers and millions of websites in just over the last few years.

Due to more mobile devices taking hold of the web landscape, UI designers and developers have been trying to figure out how to make hover menus and drop down menus work well in a mobile environment.  More and more designers have found going minimalist for their users have received possible feedback about this simplistic approach to their designs.  With that, brings less and less layers of your websites.

Genesis 2.0 has realized this movement, and that clutter on a mobile device (or anywhere else), so they are starting to pull away from Superfish.  Now many of you probably still have plugins or themes that use Superfish, and may not even realize it.  But when you update your site, you will figure it out pretty quickly.

Screen Shot 2013-10-02 at 5.30.26 PM

When your menus do not display when you hover over or click on them, and you only updated WordPress or Genesis, then you have a plugin / theme using Superfish.  But there is a way to still sneak around this issue until you have found better ways to display your content.

When you are in your WordPress Dashboard, go to your Genesis Theme Settings and under the Navigation section, you should be able to enable/disable the checkbox to Load Superfish Script

Save and now your menus should act as they did before your update(s).

 

I would highly recommend thinking about organizing your content in a new, more mobile friendly way, and finding better use of your navigation.  At the time of writing this entry I realize some of my content is found under drop down menus, even though I don’t use anything with Superfish/Suckerfish.  

 

I will be taking my advice and reorganizing my site soon.

Customize your wp_get_archives() in WordPress

Usually I am very pleased with the WordPress community about how helpful they are with users who have questions.  Occasionally though, there is a question where for whatever reason people attack the user the question.

Thus I wanted to write about this one question/issue in particular because I have had multiple clients ask.  Although it’s not hard, it is not well documented at WordPress.

Have you ever been to a 404 WordPress page or even used a plugin/widget that displays Recent Posts using <ul> and <li> tags?
Have you ever wanted or wondered if this could be changed?  Great news, it can be.

If you are wanting to remove the <li> and </li> around your listing and customize the list, you are in luck.

In this tutorial I will cover how to take wp_get_archives and do some customization to it.

Open your 404.php or archive.php file and let’s get started.  Disclosure, I did use a Genesis child theme when doing this tutorial so if you see anything referring to Genesis, it’s not core to WordPress and my functions may be slightly different from what you see.

Okay, now you want to look near where your archive page has the header “Recent Posts” and you should see something like

Step #1


<ul>
<?php wp_get_archives( 'type=postbypost&limit=100' ); ?>
</ul>

Here you will want to modify the code by adding your modifications

format=custom  (this is required to take away the default format=html to be overwritten, and you now have two options.  A ‘before‘ and an ‘after‘ parameter.

Step #2

In my example I change the default

<?php wp_get_archives( 'type=postbypost&limit=100' ); ?>

to be

<?php wp_get_archives( 'format=custom&before=<p id="test">&after=</p>&type=postbypost&limit=100' ); ?>

Step #3

Now instead of a unordered list using <li></li>, the code will now be <p></p> and you are ready to go to town on customizations.  Endless possibilities.

I know this might be confusing with all of the code, so I’ve included a short video tutorial doing the same steps.

YouTube Preview Image

Featured Images in Genesis – Hiding, Displaying and Removing them.

I’m a huge fan of Genesis and StudioPress as a whole.  Also, Brian Gardner is amazing at ideas and the work he has developed along the way.  Even so, there are occasions when I need to tweak things just a little to fit my  (my clients) needs.

One particular example is making sure the Featured Images of Posts are displaying in the correct places of Genesis. In this short tutorial I am going to display and explain the code for getting the Featured Images to fit your needs. Although I am going to be referring to Genesis code, most of this code can easily be converted to other themes, minus the Genesis calls. Also for simplicity reasons, I will refer to the Agency theme, but again use your Child Theme names where you see “agency” if it helps you.  Feel free to contact me if you have particular questions about the code.

Here are the scenarios:

I want Featured Images on Single Posts (individual Posts all by themselves and nothing else on the screen, or some themes will use single.php as the theme)

Open your Child Theme functions.php (remember we said we are using Agency)
/** Add Post image above post title, single posts only */
add_action( 'genesis_before_post', 'agency_post_image' );
function agency_post_image() {

if ( is_category() ) return;
if ( $image = genesis_get_image( 'format=url&size=post-image' ) ) {
printf( '<a href="%s" rel="bookmark"><img class="post-photo" src="%s" alt="%s" /></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
}
}

What’s going on here, you ask? So let’s go through this – line by line

add_action( 'genesis_before_post', 'agency_post_image' );
= We need to add an action for Genesis to know what to do, so using Genesis hook reference genesis_before_post is what executes before each post in all loop blocks (outside the post_class() div)

function agency_post_image() {
= This is just to start the new function that your aforementioned action will call. You can name it whatever you want to, just use it correctly in the above action as well.

if ( is_category() ) return;
= This code tells Genesis if you are on XYZ page (Category Pages, in this case) to just return nothing and not display anything special. This is the BIGGEST thing to remember, and you will see why shortly.

The last if statement is saying “When we display an image, here is the URL, the size of the image you uploaded, and I am going to print the URL of the original Post/Page the image was a Featured Image of.

Now this is where it gets real fun. Read on…

If you were to change is_category to something slightly different you would get an entirely different outcome, so:

if ( is_category() ) return;
= as originally explained, this makes sure Featured Images do not display on Category pages; but does show everywhere else.

if ( is_page() ) return;
= this makes sure Featured Images do not display on Pages; but does show everywhere else.

if ( is_single() ) return;
= this makes sure Featured Images do not display on Single Posts pages; but does show everywhere else.

Happy Coding

Adding a CSS Class to WordPress Editor

The Reason

I like making it as user-friendly for my clients as possible.  WordPress does many, many things great, but some of the styling concepts lack just a little.  In this situation, I figure it is better just to create a simple hack to your WordPress theme, and it doesn’t matter if you are the client or the developer trying to help your client.

Solution

Believe it or not, it is just a few steps and you will be up and running before you know it.  Just follow these steps in the order I explain them, and you should be ready.

  1. Install the TinyMCE plugin
  2. Create a stylesheet in your theme directory, and name it anything you want.  I’ll call mine “new-styles.css” for sanity sake
  3. Inside your new CSS file, add a new class, doing what you want differently, maybe a different color or size

    a.External-Link { font-size: 2.2em; color: #FC0; }
    
    
  4. Now, open your theme functions.php file, and at the bottom add the following
    
     function addLinkClasses( $wp ) {
     $wp .= ',' . get_bloginfo('stylesheet_directory') . '/new-styles.css';
     return $wp;
     }if ( function_exists( 'add_filter' ) ) {
     add_filter( 'mce_css', 'addLinkClasses' );
     }
     

Yep, you are done.