From the Blogabout me

Setting up email on an Android Tablet

Occasionally I have clients who need assistance setting up email on n Android tablet, so I wanted to give a quick walk-through on how to do so for most devices.  These steps may not be 100% the same on all devices or versions of Android, but give it a try.

  1.  Start the Email app.
    Look for it in the Apps drawer.
    If you haven’t yet run the Email app, the first screen you see is Account Setup.
    If you’ve run the Email app before, you see the Email inbox and you’re done.
  2. Type the e-mail address you plan to use for the account.
  3. Type the password for that account.
  4. Touch the Next button.
    If you’re lucky (i.e., you just used Google/Gmail for the email), everything is connected and you can move on to Step 5.
    Otherwise, you have to specify the details as provided by your ISP, including the incoming and outgoing server information, often known by the bewildering acronyms POP3 and SMTP. Move through the steps on the screen, although the tablet really just wants to know the incoming and outgoing server names.
    Your ISP most likely has a support web page for setting up e-mail accounts. An example of these settings may look something like this:

    Username: youremail@yourdomain.com  (obviously "yourdomain.com" would actually be whatever your domain is, so replace this appropriately)
    IMAP Port: 143
    POP3 Port: 110
    Password: whateverYourPasswordIs
    Incoming Server: mail.yourdomain.com
    Outgoing Server: mail.yourdomain.com
    POP3 Port: 110

    If there is a box for “Authentication is required for IMAP, POP3, and SMTP” then click it.
  5. Set the account options on the aptly named Account Options screen.
    If the account will be your main e-mail account, place a check mark next to the Send Email from This Account By Default option.
  6. Touch the Next button.
  7. Give the account a name and check your own name.
    The account is given the name of the mail server, which may not ring a bell when you receive your e-mail.
    The Your Name field lists your name as it’s applied to outgoing messages. So if your name is really, say, Bill Gates and not billybob, you can make that change now.
  8. Touch the Next or Done button.
  9. Smile and jump up and down: you’re done.

 

 

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.

Clean USB SD Card for Mac

If you have ever used a flash drive (thumb drive) or any type of SD card with your Mac, you may have noticed that after you have deleted files they end up in the .Trashes folder, and you could either lost card space or not be able to use your card or drive at all.  Don’t worry, there is always a fix.  And this is a simple one.

Most of the time you can just use the Disk Utility to click “Clear Empty Space” or even “Erase.” For some devices though, this doesn’t work. When I started using the HTC Re Camera, I loved it and before long it became part of my every impromptu pool, ocean, or hike camera. But it doesn’t really like the Apple Disk Utility as much as it does within the Windows Environment. Although the Re Camera is definitely not the only flash drive or SD card device that has this issue, it is an issue that you will need to know how to resolve if you use a Mac.

 

<1> Open Terminal, type cd /Volumes/<your thumb drive>

Remember the <your thumb drive> section is whatever your device is called. For instance if your drive is called “UNTITLED” the command should be:

cd /Volumes/UNTITLED

<2> Now type:

rm -rf ._.Trashes .Trashes/ .Spotlight-V100/ .fseventsd/

<3> Eject and use the thumb drive. The next time you plug in the drive those items and folders will be recreated

 

 

I have done this for a number of people and photographers who are not aware of this fix when the Disk Utility.

HTC M8 Stuck In Dock Mode

Have you ever had your HTC M8 get stuck in Dock Mode? Even after restart, you see it send you randomly into Dock Mode or Car Mode…  After this happened to me recently, I spent some time looking around and troubleshooting on two different devices and found a few easy things to try.

First off – DON’T RESET YOUR DEVICE (yet)…

The first things to ask yourself if this has just started happening to you:

  • Have you installed any apps recently?
  • Have you been near a pool, the beach, snowboarding or maybe dropped the phone in some dirt?

 

Test #1:

Clean your USB Port… If you are the type of person that puts your phone through intense usage or really exposes your phone to the elements, this is where you should start. The first time I noticed this issue I had been at the beach taking some photos, and about 45 minutes later the HTC M8 went crazy. A few days later I decided to take an older HTC M7 and do a quick test. I dropped it into the sand (dumb, I know), but guess what? It started the Dock Mode almost instantly.

Test #2:

Do you have a Dot View case? Have you had any magnets around your phone? What I have noticed, and others around the web-based on a quick Google search, is since HTC has a magnet sensor in the device, it may go into Car/Dock Mode in some cases where magnets are nearby.

Test #3:

Look at all recently added apps (ones you have downloaded in the last 24 hours or so. Remove them. Some people have also found relief in simply Disabling the Dock app. Personally I would rather know what was causing the issue instead of just turning off notifications. But if determined to do it – Go into the App Manager, not the app drawer. Settings>App Manager> it will open to “Downloaded” apps. Change downloaded to “All” by swiping left. Find the app “Dock”. Click “Disable”. Then reboot. Ideally, you should not see Dock to show up again.

 

 

 

If none of these troubleshooting methods work for you, I recommend restarting your device in Safe Mode to see if it continues. If so, you probably have a hardware issue (similar to what I mentioned in Test #1). If you don’t have the issue anymore while in Safe Mode, you have a software issue. 

 

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

Genesis Customized Headers (advanced use)

First and foremost – do not ever do this unless you

  1. absolutely know exactly what you are doing
  2. absolutely have to because of some unique reason
  3. absolutely know what you are doing
  4. have read and followed bullet points #1 & #3 perfectly

I absolutely love how the Genesis Framework has been developed and continue to find out things about it.  Every time I think to myself, “Gosh I wish there was a way to…” I realize Genesis developers have already done it some where.  You just have to keep digging.

In very, very rare occasions you will need to put some kind of Shell around your WordPress site.  Maybe you have an organizational brand that needs to be standard across the world, but you want to add a website using WordPress and Genesis.  If that’s the case, you may run into some issues with the required assets if you are not careful.

The piece of code we are changing is demonstrated in the screen capture here.genesis-header

In the most recent Genesis framework (1.9.1 as of today), a function such as genesis_header_markup_open will need to be adjusted.

Find the code by going to
genesis/lib/structure/header.php
and look for the function you are wanting to change.  I will change the Genesis header slightly below.

Original:

function genesis_header_markup_open() {

    genesis_markup( '<header>', '<div id="header">' );
    genesis_structural_wrap( 'header' );

}

Modified:

function genesis_header_markup_open() {

    genesis_markup( '<header>', '<div id="custom-header">' );
    genesis_structural_wrap( 'header' );

}

I’ve had to do this on rare occasions only because my clients had CSS or a structual issue where they were already using the

ID=header

so I had no way other than to make this change via the Genesis framework. I deinifitely do not recommend this as a normal practice, as you will have to change this code every time there is any update to the framework.

I wish you lots of luck.

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

Genesis Custom Category Pages

Recently I was doing a project for a client who instead of wanting the default WordPress settings for their Category pages (10 of the recent Posts and displayed based on the most recent Posts).  Instead they wanted all Posts on the same Category page, with the order to be A-Z.  This particular client also used Genesis, so they wanted to learn about Genesis custom Category pages.

Unfortunately there is not a lot of documentation for this type of sorting with WordPress or Genesis framework, and if you are not a programmer this might be hard to do.  Luckily there are resources out there who can assist.  I will try to explain and walk you through the code for the above situation, as well as give you other suggestions for similar types of situations.

 

The first part (i.e., making more than 10 Posts display) is very easy and even the most experienced WordPress users some times forget about.  Once you are in your Dashboard go to
Settings >> Reading and you can change the Blog pages display at most value to whatever you want.  In this case, we are going to change it to 99 just to grab lots and lots (i.e., 99) of Posts at once.

 

Now for the fun part – the programming.  You are going to want to find your functions.php file and add the following piece of code:

/** Order Posts A-Z on Category Pages **/
function be_category_query( $query ) {
if( $query->is_main_query() && $query->is_category() && !is_admin() ) {
$query->set( 'orderby', 'title' );
$query->set( 'order', 'ASC' );
}
}
add_action( 'pre_get_posts', 'be_category_query' );
/** end of a-z **/

Oh no Kevin, you had me lost at “code.”  No worries, I am going to explain each line of code for you so don’t freak out just yet.

 

/** Order Posts A-Z on Category Pages **/

> This is just a comment area to remind yourself what this cool function

function be_category_query( $query ) {

> we are naming and defining the function here. You can name the function whatever, but I’ve named this function “be_category_query” because I wanted to give a shout out to Bill Erickson, who you will find more information about later in this tutorial.

if( $query->is_main_query() && $query->is_category() && !is_admin() ) {

> queries (finds) all category items, except  don’t look during the time you are in the WP Dashboard.  Speeds up performance

$query->set( 'orderby', 'title' );

> now we finally tell the query to sort by the title of each Post

$query->set( 'order', 'ASC' );

> and then after getting all of the titles in order, we want to sort Ascendingly

}
}

>these just close off of the function

add_action( 'pre_get_posts', 'be_category_query' );

> we now create and execute the function “be_category_query”

/** end of a-z **/

> This is just a comment to let you remember you are closing this cool function

 

 

There are additional ways to do other customizations and sorts, and one of the best resources I have found would be Bill Erickson’s website.  Here is a great tutorial on how to Customizing the WordPress Query.

Custom CSS for Gravity Forms

Gravity Forms is one of my favorite plugins designed for WordPress, and can be easily used for the quick blogger to advanced developer alike.

More than likely you already know about Gravity Forms, so I wanted to jump straight into some more advanced CSS features that most people do not know about or take advantage of but should. If you do not know why Gravity Forms is important for your WordPress site, I have talked about it before, so feel free to read about it here.

Gravity Forms offers an area for you to add Custom CSS to any of your fields.  For instance, you will see below two screenshots – #1 my fields, #2 where to find the Custom CSS area.

#1

#1
look @ the field
“How to get in touch with you?”

 

#2 Click on "edit" then "Advanced" you will see Custom CSS

#2
Click on Edit then Advanced
you will see Custom CSS

Here, you can add whatever you want as your Custom CSS Class; and you will be able to customize as you wish.

But Kevin, I don’t know much about CSS or don’t have the time to just simply make some easy adjustments to fields like Lists, Radio Buttons, and Checklists.

Yes, Gravity Forms makes long vertical lists by default, so if you have 10 items in your Checkbox it will look something like this:

Vertical Gravity Form Fields
Yikes, we probably don’t want that.

With a simple built-in class you could have something like this:

Columns in Gravity Forms

 

Now that is pretty cool – what did you do?

I used the built-in Gravity Forms class gf_list_3col – and it is already there so why reinvent the wheel, right?

Here is a quick list of all of the built-in classes:

Checkboxes and Lists Fields

gf_list_2col = 2 columned List
gf_list_3col = 3 columned List
gf_list_4col = 4 columned
gf_list_5col = 5 columned

Two Columns of Text Fields side by side

gf_left_half = The left column
gf_right_half = The right column

Three Columns side by side

gf_left_third = Left column
gf_middle_third = Middle column
gf_right_third = Right column

Some other miscellaneous styles

gf_scroll_text = Gets a scroll box into place, for those long sections where you need to give your visitor lots of information
scrolling-text
gf_hide_ampm = If you want to hide the AM/PM portion of the Time field
gf_list_inline = Simpliar to the above gf_list classes, but just show up next to each other using the amount of space the content can use on each line, instead of making it fit within 2,3,4,5 columns.
gf_hide_charleft = Do not display the amount of characters left / character counter

I’ve not found a great use for these, but they are available:
gf_list_height_25 = 25 pixels between list items
gf_list_height_50 = 50 pixels between list items
gf_list_height_75 = 75 pixels between list items
gf_list_height_100 = 100 pixels between list items
gf_list_height_125 = 125 pixels between list items
gf_list_height_150 = 150 pixels between list items

I hope this quick cheat sheet will have you using Gravity Forms at it’s greatest potential, and you will be the envy of your other programming friends since these are fairly unknown.

 

Gravity Forms is a plugin developed by Rocket Genius, and is well worth looking into for your WordPress website.