Tip: Only show the first full post on WordPress.

As you can see on my homepage, only the first post is shown, the rest are just titles. The reason behind this, search engines do not like duplicate content. If every post is shown on the homepage, the actual post page, and the archives then the search engines see 3 of the same articles with different URL’s. Another reason is that it makes scanning for an article much easier. I was inspired for this after seeing Ben Bleikamp’s Blog and loving the simplicity and ease of use.

Here is the highly simplified code I used to achieve this effect, of course yours will be quite different. The important part is the php if statements and the $count variable. Of course if you want you can hire me to implement this on your blog.











			



Quick Codes: A new series of post on Complimedia (JS + CSS)

Aside

In this new series of post on the Complimedia Blog, I will be finding the best scripts, snippets, tricks, and hacks in the world of web design and posting them for you. You can find the complete series on this page as well.

Today I will be sharing a small javascript that can manipulate css of the containing elements and a super simple fix for web forms.

Lets start with the javascript shall we?

This is a handy little snippet of javascript. I found this script on IE6 No More, a website that is promoting dropping support for IE6 with a small script that can be added to any website. I will improve upon their script in a later tutorial but for now I wanted to share the easy snippet of JS they use to hide the warning.

This tiny onclick event will hide whatever the parent element is(or grandparent, etc…). This has a great many uses but I will leave that up to you to figure out. Lets see the code.

<div>
<a href="#" onclick='javascript:this.parentNode.style.display="none"; return false;' title="Hide this box">Hide Div</a>
</div>

Breaking this down, it is a simple link with an On Click javascript event that will change the parent element’s CSS to display:none which will hide it. Its also worth noting in the above example the only thing that would happen is the Hide Div link would disappear. You can adjust which element to change by adding .parentNode. after the first one so it would be two levels above.

I created a quick demo page with some more uses of this code.


The next bit of CSS is very basic and I use it all the time.

What it does is hides the browser default field focus. You know when you click a text field and a blue outline pops up to show you what your filling out. Well this usually breaks my design so I add this and all is fixed!

textarea, input { outline: 0; }

Before And After

You can see this example at http://lickmytwitter.com

ReLink: Secret Copywriting Trick Makes People Buy with Eyes Closed.

Aside

I am going to share a great resource for writing successful sales copy.   After reading this short article many people will feel a dark cloud drift away as they learn how to sale anything with a friendly approach.   Anyone with website should carefully read this article and use it for all their vitally important “Call to action” pages.  Secret Copywriting Trick Makes People Buy with Eyes Closed.

My thoughts

Very excellent reading, this information goes hand in hand with social media marketing. Most of my small business clients are so used to selling their services that they have a very hard time engaging and conversing with the people. They just want to shout about their newest product or special rate they have going. PS: The comments didn’t work there for me so feel free to leave them on my barren excuse for a blog.

My first blog, resurrected and alive.

Aside

Today I was looking at my old blog’s comments and thought I’d start updating it again. You can see it at freepsds.wordpress.com. Graphic design was my first career choice and still my favorite aspect of web design & development. I really do love great design and will try to share as much as I can with the design community. Be sure to bookmark or subscribe to FreePSD’s becuase I will be adding a lot in next coming weeks.

Also, I would LOVE comments on what you would like to see!

My first blog, with a spiffy new theme and post

My first blog, with a spiffy new theme and post

New theme for the blog

Aside

I cant stop redoing my blog’s theme. I think this is the 4th theme in less than 6 months. This one is based off sandbox. It has been heavily modified. I used sandbox because it was an open source wordpress theme framework with some really good selectors, valid code, and great built in SEO. Keeping in the Complimedia Online brand, the colors have stayed the same except for removing the dark background that was mainly images in the previous theme.

Better 404 error pages by design.

Aside

One of the worst things that can happen to your business is someone spreading a link to your site that is broken, it will frustrate anyone who followed it and negatively impact your SEO (maybe, its a guess). Some savvy web developers have been using custom error pages for quite some time and this is my personal approach to creating a error page.

404 Error pages should do three four things;

  • alert the visitor the page cannot be found
  • suggest pages from the site that may be what they were looking for
  • and alert the webmaster of a missing url or bad link, so they can add a 301 redirect
  • Most importantly, as our commenter pointed out have a call to action for the visitor so they don’t leave the page.

You can see my blog’s 404 error page handled all these issues.

My comments are broken, I need help!

Aside

From the wordpress.org support forums topic i made:

Whenever anyone including admin leaves a comment it gets assigned to a different post. It happens on all the posts on my site. The weird thing is it will still show up on the correct post page but when you leave a comment it goes to the old post with no comments. If you go back to the page you will see it. In the wp-admin dashboard you see the comment assigned to the wrong post in comments tab.

I tried using another theme and it didnt fix anything. I also installed some database repair plugins and they did not fix the problem. I think it may be my functions.php file is messed up?

I really would love help fixing this, I have my blog where I am happy and it is a business blog so I really need it working correctly! Thanks so much for the time and support you put into the wordpress community!

I cannot think of a way to fix this, sadly my backups were written over by my host. “Daily backups” really means they dont store your backup for longer then 24 hours before it is written over.

Any suggestions? Could you RT this post?

I FIXED IT! Something was messed up in my theme.

How To: use your .htaccess file

Aside

So one of the things I have been experimenting with lately is the .htaccess file.   I had heard of it before but never implemented it into my websites.   That changed when this blog was getting blasted by spam “bots” that were eating up my bandwidth!  Last month I had 2GB of bandwidth consumed by the “bots”. Also I had heard of using this file to make your url always have a www. at the beginning even if the user doesn’t type it. Then their are also ways to redirect visitors in case you change your file directory. So I thought I would share what I learned!

# This allows you to redirect your entire website to any other domain
Redirect 301 / http://example.com/

# This allows you to redirect index.html to a specific subfolder
Redirect /index.html http://example.com/newdirectory/

# Redirect old file path to new file path
Redirect /olddirectory/oldfile.html http://example.com/newdirectory/newfile.html

# Prevents directory listing
Options -Indexes

# To redirect all users to access the site WITHOUT the www. prefix,
# (http://www.example.com/… will be redirected to http://example.com/…)

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.example.com$ [NC]
RewriteRule ^(.*)$ http://mt-example.com/$1 [L,R=301]

# To redirect all users to access the site WITH the www. prefix,
# (http://example.com/… will be redirected to http://www.example.com/…)

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

# To block all the bad “bots”

RewriteCond %{HTTP_REFERER} ^-?$ [NC]
RewriteCond %{HTTP_USER_AGENT} ^-?$ [NC]
RewriteRule .* – [F,L]

Blog updates + new biz card design

Aside

Hey everyone who reads this. So I did a few updates to the blog for usability and because I am a designer and that means I spend at least 2 hours a day working on my websites for fun!

1) You can log in through using an OpenID on the register page or on the comment forms below each post. Open ID is awesome, go here to read more about about OpenID.

2) Expandable twitter tweets and delicious links in the sidemenu. Click them twice to open and once to close or open again. (poor jQuery coding on my part, can you fix it?)

3) Thats it I think. Oh ya I added the rss icon on the top right.

Now here is a video of my new business cards that is hosted on my blip.tv channel.

Tr.im + wordpress + twitter = good

Aside

So I just got my this blog set up to send a tweet to twitter whenever I make a post. I love wordpress functions and API’s! Also I set the twitter tools plugin to make a weekly digest of my tweets in a post! How cool is that? Really cool. A few days ago I set up a custom field to hold the tr.im url so that whenever someone clicks the “Tweet this” button on the bottom of my post it adds the tr.im url instead of a permalink for a cleaner look and more space for the post title. With Twitter Tools and the custom tr.im plugin I will be able to automagically fill in a custom field with the tr.im url so I don’t have to do it manually.

Update: For some reason I cannot get the Twitter Tools plugin to make a custom field with the trimmed url, any suggestions?

Update #2: The trimmed url that was generated is not tied to my account, maybe I should use my API key instead of the username & password?

Update #3: I fixed the code below to show how to get the trimmed url to work with your accounts. I changed "&username=" to "&username=

Tools used:

And this blog post to tie it all together: How to use tr.im with twitter tools.

To do it in an easy step by step fashion:

1. Install the Twitter Tools plugin and set it up.
2. add the following somewhere in your functions.php file in your themes folder. Make sure to change the username and password to your tr.im account.

// Add hook for Twitter Tools URL shortening filter
   add_filter('tweet_blog_post_url','makeTrimURL');
function makeTrimURL($myURL) {
// Accepts a WordPress post URL
// Returns a tr.im URL or original URL if unsuccesful
  // Change USERNAME and PASSWORD to your tr.im login
     $trimUsername = "USERNAME";
     $trimPassword = "PASSWORD";
  // Construct the tr.im query string
     $trimQuery = "http://api.tr.im/api/trim_url.json?url=" . $myURL;
     $trimQuery = $trimQuery . "&username=" . $trimUsername;
     $trimQuery = $trimQuery . "&password=" . $trimPassword;
  // Query tr.im and decode returned JSON string
     $trimJSON = json_decode(file_get_contents($trimQuery));
  // If everything went OK we'll return the tr.im URL
  // Otherwise we'll return the original URL
     if ($trimJSON->{'status'}->{'result'} == 'OK') {
        $trimURL = $trimJSON->{'url'};
     } else $trimURL = $myURL;
  // And we're done!
     return $trimURL;
     }

HOW TO: #Hashtags on twitter (#quote, #followfriday, etc..)

Aside

So you just got on twitter and you have no idea what the hell is going on? Ya it happened to me to. I was seeing all types of interconnected conversations and didn’t know how to step into them. This post will explain what the #hashtag tweet is all about. If you are brand new to twitter you may want to read my learn the basics of twitter post.

The first thing to do would be going to search.twitter.com and typing in a few of your favorite activities, hobbies, jobs, or interests. This is a great way to find new friends on twitter. Most likely you will notice a few tweets with the # and a word after it. That is a “hashtag” and it is just the number or pound sign plus a “tag”. Tags are words that describe the content. On this blog you may notice the tags i have on posts. Hashtags are tags for twitter.

Now you got a few friends that use the hashtag, you will want to join in. The most popular (in my opinion) is the #followfriday hashtag. Thought up by @micah it was started to share interesting new friends on twitter with others, on fridays. Here is how it works, on friday thousands of people on twitter pick some people they like on twitter and tweet their @names and the hashtag #followfriday. Its simple, quick, and helps new people on twitter find interesting tweeple. It works because your friends see who you like and can retweet it. Seriously fridays are always the day when I get a lot of followers.

You can put a hashtag after any tweet you make like in the example #eco. After any tweet that has to do with the green movement, environmental causes, or eco news you can put the #eco hashtag and other people will easily be able to find it and share it.

Lets have a real life examples:

I tweet the following: “I just planted a tree, i feel so #green” it will show up on twitter search for #green immediately as well as any web apps that rely on the twitter API and feeds that are set to retrieve those tweets.

Here is a list of popular #hashtags I know of, feel free to suggest more in the comments below!

~#followfriday Fridays only! Suggest new friends to your followers.

~#quote One of my favorites! I even built a web app Twuoted – Quotes from twitter to find new great quotes. Use it after any quote you want to share!

~#musicmonday Mondays only! Tell twitter what music you like.

~#green Like the planet? Me to, i use a lot of #green!

~#dev For the developers out there making the web happen.

~#design I love design. A lot.

~#wordpress If you got questions about wordpress use this.

~#fastfollowfive A new good one, suggest the 5 latest people you follow who tweeted. (@montanaflynn @twuoted @complimedia @GNUlicense @dom #fastfollowfive)

~You can pretty much look for any event or destination with the hashtag as well, #SXSW was VERY popular on twitter during the south by southwest event.

Their are many websites that utilize hashtags on twitter for their content…

These are my favorites:

  • Twuoted.com – All the quotes on twitter in one searchable website! (I made this one!)
  • Hashtags.org – What’s happening right now on twitter.

Their are even twitter accounts that tweet the latest hashtags on twitter.

  • @Twuoted – Twuoted.com’s little blue bird picks the best #quotes and tweets them to you!
  • @BasicProgram – All the latest on #fitness and #health!
  • @hashwordpress – Hearing what people are saying about wordpress is crucial to my success.
  • @hashdev – Another one of mine, all the latest #dev hashtags retweeted.

If you want to start your own tag make sure it is small and easy to remember and type. I love to tag a lot of my links to blogs with tags like #design #css #websites to make sure they reach the most people looking for that information. I hope you will do the same.

Thats it for now, if you got any questions leave a comment or tweet at me @montanaflynn.

If you want to learn more about the basics of twitter I did a post just for you! Click here to learn the basics of twitter.

Freshbooks Invoicing

My new chi.mp micro-blog!

Aside

Wow this is a really cool service! A micro-blog is an online activity wall with all your latest tweets, blog posts, and whatever else you do online!  Chi.mp is the first web app that I’ve seen that allows you to do this in such a user friendly way.

Your account comes with a dashboard, micro-blog, a full on blog,  photo gallery, and a contact list.  Visitors can request you add them as a contact and you classify what type of contact they will be. You can create separate persona’s such as public, work, and friends to show what you want to each category of your contacts!  I set mine up in an hour or so and even though it is in a private beta it was very easy to use and had a great user interface!  I integrated my twitter, facebook, and last.fm accounts to show up and even this blog’s RSS feed.

Another cool thing is you can use your chi.mp website as an openID.  OpenID is a way to stop using different usernames & passwords for each site you sign up with!  With openID you always know what information you are sharing with websites and only have to remember one username to sign up with a new website and your password never gets shared with them. Its a great idea and Ihope to see it implemented in more sites soon!

Check out my chi.mp site here: www.montanaflynn.mp

Leave a comment and I may share an invite with you!