Installing custom search manually looks simple at first but it really isn’t. In this post I will show to you step-by-step how to integrate Google search to your wp site.

WordPress Google Search Integration in 10 Steps:

1. Create a new page where you want your search results to appear.

2. Sign-up and create a Google custom search account for your website here:

http://www.google.com/cse/

3. Enter your website URL then go to ‘Look and Feel’ on the left column.

4. Select ‘Two-Page’ then click the ‘Save and get code’ button on the bottom.

5. Copy the first set of code.

This is for the search box. Paste it in notepad for later use.

Don’t hit next yet!

6. In the same page click the ‘Search Results Details’ on top.

Enter the url of the page you created in step 1.

Hit next to get the code for search results.

Copy and paste it again in notepad then go back to wordpress and edit the search page you created.

7. Copy and paste this portion only in html view.

<gcse:searchresults-only></gcse:searchresults-only>

Many people get problems when they add two copies of the the javascript. You only need one and we’ll put that in the head area.

Save the page then go to widgets under appearance.

8. Drag a text widget to your sidebar widget area then paste the search box code.

<gcse:searchbox-only></gcse:searchbox-only>

Again, without the JavaScript.

Save the widget then open your header.php to add the javascript.

9. Paste the JavaScript just before the closing head tag.

Remember the script from the searchbox and the search results area exactly the same so any one will do.

10. Save your header.php and test your sidebar search.

You should now have something like this:

Test out your search box and if you followed each step correctly you’ll automatically be redirected to your search page with results.

Search for something…

Results show

Other popular areas to place the search box is in the header area or the navigation menu. Once you’re sure everything’s working right you can go back to Google to customize your custom search to match your website’s design.

Share and recommend this on your social networks if you found it useful or helpful.

The post 10-Step WordPress Google Search Integration appeared first on Caleb Serna.

I accidentally got it too work with the help of advanced custom fields plugin. Follow these steps:

1. Download and install Advanced Custom Fields

2. Add this code snippet in your custom_functions.php:

[php]
//Hide title
function hide_post_title() {
if(get_field(‘long_title’) && is_single())
return false; // Do not show headline
else
return true; // Show headline
}
add_filter(‘thesis_show_headline_area’, ‘hide_post_title’);

// Long Title
function show_long_title() { ?>
<div class="headline_area"><?php
if(function_exists(‘get_field’)){
if(get_field(‘long_title’) && is_single()) {
echo ‘<h1>’ . get_field(‘long_title’) . ‘</h1>’;
}
} ?>
</div>
<?php }
add_action(‘thesis_hook_post_box_top’,'show_long_title’);
[/php]

3. Add a custom field name ‘long_title’ and enter whatever you want for your long title.

When you see a different title for your page and navigation then you have done it correctly. I have it setup on this post right now.

Reply below for questions. Share this if you found it useful.

The post WordPress Different Page Title to Navigation in Thesis appeared first on Caleb Serna.

For this reason I had to add another plugin called Dynamic Widgets which has build in integration for WP e-Commerce pages.  The only problem with this is that Dynamic Widgets significantly slows page loading according to a plugin profiler I use to test with.

My life would be much much easier if I could use Widget Logic only. After doing a lot of research I have found the perfect logic that works with WP e-Commerce. This is how to show widgets in store pages only:

Use this code to load widgets in single products, product tags, categories and variations:

is_singular('wpsc-product') || is_tax( 'product_tag' ) || is_tax( 'wpsc_product_category' )|| is_tax( 'wpsc-variation' )


When you first install WP e-Commerce it automatically creates pages. Use this code to load widgets in the default pages along with the pages above.

is_page( array( 'products-page', 'checkout', 'your-account', 'transaction-results' ) ) || is_singular('wpsc-product') || is_tax( 'product_tag' ) || is_tax( 'wpsc_product_category' ) || is_tax( 'wpsc-variation' )


If you did everything right you can now selectively load widgets like a shopping cart or product categories navigation only in the shop pages.

Share this if you found it useful. Reply in the comments to leave feedback.

The post WP e-Commerce Show Widgets in Store Pages Only appeared first on Caleb Serna.

If you’re using WordPress to build your web design portfolio, there a several outstanding plugins that can help display your work to potential clients.

10.  WP-PageNavi

    

    Makes it easy for visitors to navigate through your portfolio. Specially useful if you have more than two or three pages worth of posts.

9. Regenerate Thumbnails

   

   It’s a time saver when you are constantly resizing a bunch of images of your sample work. One-click and all your images are resized in no time.

8. Google Analytics for WordPress

   Check which pages visitors spend more time and view and your can continue improving those areas on your site.

7. Enable Media Replace

   This is a treasure among image management plugins. More often than not you need to update or change an image and this does it smoothly for you quickly.

6. Breadcrumbs NavXT

   Small features like breadcrumb trails make a big impact on site navigation and SEO. It’s extremely useful to let visitors know exactly where they are or how to get back to where they started. This provides an excellent user experience for all visitors on your site.

5. Digg Digg

   Make it easy for visitors to share your work with their own personal network using a floating share bar or the traditional bookmarks at the bottom of posts.

4. WordPress SEO / All-in-One SEO Pack

   Gives you more reach through search engine visibility. Google will love you for this.

3. Display Posts Shortcode

   This pllugin gives you a quick way to list posts in any layout you can think up without having to mess with WordPress loops in templates. It saves time if you’re constantly rearranging your layout.

2. Pricing Table

   This plugin is essential in any web design services site. It gives your clients a clean visual of your pricing and rates.

1. Contact Form 7

   Your contact form or request for quote form is your ultimate measure for conversions. Without it, you would not get any clients AT ALL. What makes it superior to the rest of the contact form plugins is that there are many free useful add-ons built around it like contact form 7 to database and simple captcha for CF7.

These plugins may not be specifically made for creating portfolios but if you put them all together you’ll get a powerhouse website to showcase your work. Adding too many plugins might slow down your page load time so try to get the most mileage with only a few.

Share this with a Like, Tweet or Plus 1 this if you found it useful.

The post WordPress Plugins for a Web Designer Portfolio appeared first on Caleb Serna.

The post How to Hire a Web Designer appeared first on Caleb Serna.

This was a really exciting project to work on since it’s all about local surfing in the Philippines. Part of surf culture is being artistic, clean but still relaxed. I included those attributes within the design. The website has tons of quality information and cool graphics. It’s highly interactive and encourages user content submissions.

JBHXKN4TAQCA

The post SurfingPhilippines.com appeared first on Caleb Serna.

Here is an example of a creative website design inspired by the masonry layout of Pinterest.

The post Hooray.co appeared first on Caleb Serna.

One of the graphic design basics is color scheme. Choosing an appropriate color scheme for your web site is one of the first steps in the website design process. If you’ve already got a logo, you’ll typically want to stick to the colors already used for branding purposes. This way your site carries the same color and feel of your logo through out it’s design. If you don’t yet have a logo though, or are looking for a re-branding of your company and product, choosing a color scheme is important.

Color Meanings

Colors provide a lot of information to viewers because they have so much emotion associated with them. For instance – Red gives a feeling of passion and power. Blue gives a feeling of peacefulness and stability. Black gives a feeling of power and elegance. Here’s a more comprehensive list of the associations that we have with colors

Blue

Professional, trustworthy, calming  / corporate high-tech, medical, government, legal  e.g. b of a

Black

Strength, power, professionalism, accurate  Financial, corporate, manufacturing, oil minding

Green

Educational, youth oriented, organic, natural, calming, environmental / Science, medicine, ecological, Human Resources

Red

Evocative, exciting, romantic, urgent, hungry, sexy / Advertising, fashion, health care, entertainment, sports, fast food (Time, Arbys)

Pink

Feminine, caring relaxing, compassionate / body, mind, soul, female, health, weddings, funeral (Barbie)

Orange

Youthful, innocent, dynamic, creative, enthusiastic / Sports childcare, educational, food and beverage (Nickelodeon, home depot)

White

Clean, simple, fresh / high-tech, medical ( Apple )

Brown

Traditional, reliable, nurturing, earthy, safe / Animals, real estate, financial, ecology (Hershey’s, UPS)

Yellow

Design, create, idea driven, creative, positive / food and drink, child care, marketing (Best buy, Mcdonalds)

There are some great sites out there to give you inspiration for color schemes. My favorite is Adobe Kuler.  If you’re more of a hands on kind of person, try checking out the paint samples section in your local hardware store for inspiration. It’s a great way to see colors in person and you can always bring home the samples.

As you go through the planning process, take the time to think about the basics of graphic design like colors and what they say about you and your business.

The post Graphic Design Basics – Color Scheme appeared first on Caleb Serna.

Graphic Design is Important for Functionality

Remember that for most visitors to your site it is their first contact with your business, and you know what they say about first impressions, so make your first impression on potential clients a great one. Beyond first impressions there is the functionality of a site to consider. If a visitor can’t get around a website easily they are not likely to stay. Functionality is a very important issue in website design. Make sure you keep your site design modern with easy navigation is clear and always working. Keep it simple, working and up to date.

Graphic Design is Important for Marketing

One of the best things about the internet and websites is the amount of information they can contain. With a well designed site you can offer information about your business that no other medium can deliver, and do it at an unrivaled price. When you look at other marketing forms and compare the cost of reaching new customers you will quickly see why the internet has become vital for a well mixed marketing plan.

The web offers your business worldwide exposure at a fraction of the price of traditional graphics design sources. This is exactly why every major company has professional graphic design and a website. It’s cost effective, dynamic and relevant in this digital world.

The post Why Graphic Design is Important for Business appeared first on Caleb Serna.

It’s common for website owners to give too much attention in web page designing to make  their site pretty but do not spend enough time with developing an internet marketing strategy. It’s understandable that looking good is important but what is the use of having the most attractive web design but not generating sales or visitor traffic. Here are some important  tips for promoting your website.

Easy Navigation and Clear call to action

Your customers don’t have time to search for the information they want now, and you don’t have the time to explain it to them.  ensures the most important information is easily accessible. It’s not your customer’s responsibility to decipher who you are and what you do. Provide a clear message that will allow your customers to understand the benefits of your key services and products.

Brand Building

Your customers will gain an immediate comfort and familiarity with your brand image designed by . Your logo and design will stand out from the crowd, making an impression on your customer’s mind. They’ll remember the look and feel of your brand, and feel good themselves about choosing your company over the competition. Email Marketing is another form of highly targeted marketing on the Internet.

It will help connect you and your clients through the following methods:

• List building
• Target Market Consultation
• Automatic Email Processing & Removal
• Professional Email Design

SEO Web Design

The Internet has opened up an entirely new market place, and your customers are increasingly searching for you online in search engines. It has been estimated that over 80% of all Internet traffic comes from leading search engines such as Google and Bing. People start at search engines when they want to find something to buy. Even today a majority of websites are still not optimized to make their products and services easy to find.  Search Engine marketing is an important tool in promoting your website. Give your customers a fast way to find you through search engine marketing.

How does your business rank among your competition? Setup a well planned Marketing and Search Engine Optimization campaign and stop guessing at your website’s future. Looking good isn’t all that important if it’s not making you any money.  Make sure that your marketing strategy works well together with web design and development to create an image that sells.

The post Web Page Designing for Marketing appeared first on Caleb Serna.