How to change the Paypal logo on the WooCommerce checkout page

Here is how to easily change the PayPal image logo on your WooCommerce checkout page, with code and image download.

On the WooCommerce checkout page PayPal has a default logo:

woocommerce PayPal logo

Perhaps you want to change the logo to something cleaner:

change woocommerce PayPal logo

Here is how to change the PayPal logo on the WooCommerce checkout page.

First upload the PayPal logo you want to use to your media library. You can right click download this logo if you want to use it.

paypal logo

Next copy the link to the image you uploaded. Edit the code below (if the name of the image file is different). Paste this into the function.php file in your theme, upload that to your theme.

function paypal_checkout_icon() {
	return '/wp-content/uploads/paypal-logo.png'; 
}
add_filter( 'woocommerce_paypal_icon', 'paypal_checkout_icon' );

That’s it, you should now see the new PayPal logo on your WooCommerce checkout page!

How to redirect all URLs on one domain to same URL on new domain

.htaccess snippet to redirect all URLs from one domain to a new domain.

If you are changing your domain name but keeping the same URLs (except for the domain name itself) you will want to setup a redirect in your .htaccess file to make sure you don’t mess up your search engine juice.

Example, if you have this URL indexed in Google:

http://olddomain.com/my-awesome-page/

After changing your domain you want that URL to be redirected to your new URL:

http://newdomain.com/my-awesome-page/

Easy enough, add this to your .htaccess file (add your old and new domain of course):

RewriteEngine on
RewriteCond %{HTTP_HOST} ^olddomain.com [NC,OR]
RewriteCond %{HTTP_HOST} ^www.olddomain.com [NC]
RewriteRule ^(.*)$ http://newdomain.com/$1 [L,R=301,NC]

How to Migrate a WordPress website to a new domain without FTP access

Easily migrate a WordPress website from one domain to a new domain without having FTP access.

If you need to migrate a WordPress website from one server to a new server there are a few ways of doing it. If you have FTP access for both sites I recommend using BlogVault which I talked about in a previous article. But what if you don’t have FTP access? Lets look at a great solution.

First install and activate the All-in-One WP Migration plugin.

wp migration plugin

Next use this plugin to export the current website. We will choose to export it to a file.

export wordpress

wp export

On the new site install the same plugin and this time use the import feature.

wp import

Import the file you previously downloaded (.wpress extension).

wordpress migrate

wordpress database update

Finally go to Settings > Permalinks (after relogging into your site) and save your permalink structure. That’s it, your migration is complete!

Add a CSS Gradient to Font Awesome Icons

Lets style Font Awesome icons with a CSS gradient instead of a solid color.

gradient icons css

If you use the popular Font Awesome icons you already know how to add a solid color to it with CSS. But what if you want to style it with a gradient instead? Luckily this is easy enough. Here is our HTML:

< i class="fa fa-facebook-square gradient-icon">
< i class="fa fa-linkedin-square gradient-icon">
< i class="fa fa-twitter-square gradient-icon">

We add the extra CSS class “gradient-icon” to the default Font Awesome code. Then we style it like below:

.gradient-icon {
    background: -webkit-gradient(linear, left top, left bottom, from(#ff5db1), to(#ef017c));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: initial;
}

You will want to edit the 2 colors in the CSS code. All set!

gradient icons css

Create a Horizontal Accordion FAQ Section in WordPress

Lets create a FAQ section for a WordPress website using a horizontal accordion plugin and add styling with CSS and Font Awesome.

A common feature of business websites is a frequently asked questions (FAQs) section. Clients like to use these to give quick answers to common questions. I like to use a horizontal accordion to display these so the user doesn’t need to scroll down the page forever to find the question they care about. Lets set one up on a WordPress website.

Install a horizontal accordion on your WordPress website

First install and activate the Accordion Shortcodes WordPress plugin.

wordpress accordion plugin

Next open your FAQ page and click the “Add an accordion group” icon.

add accordion

Next you will see a popup with different options for the accordion, below are the ones I use.

insert accordion

Put your cursor between the new accordion shortcode and now click the “Add an accordion item” icon.

accordion item

At this next popup you will enter your first question.

faq question

After adding this item you will manually enter the question answer between the new accordion item shortcode. Next repeat this process (only the accordion item, not the accordion group) for all remaining questions (it’s easiest to copy/paste the accordion item, then replace the text).

wp faq

The default accordion has no styles so it looks pretty bland.

Default Accordion Closed:

faq og

Default Accordion Open:

faq og open

Lets add some styling for the accordions. We’re going to use Font Awesome icons so make sure to hook those up to your theme. Then add this CSS to your theme, you can of course make any edit to customize the look. We are going to use CSS to add a font icon for the open (+) and close (-) states of the accordion item titles You can change these icons, see available codes here.

h3.accordion-title {
	position:relative;	
	background: rgba(245, 242, 242, 0.5);
	padding:13px 35px 13px 20px;
	margin-bottom:4px;
	cursor:pointer;
	color:#333;
	font-size:20px;
	line-height:26px;
	text-transform:none;
}

h3.accordion-title:hover, h3.accordion-title.open {
	background:#fff;
}

h3.accordion-title:after {
	position:relative;
	content: "\f067";
	font-family: FontAwesome;
	font-size: 20px;
	position: absolute;
	top: 15px;
	right: 15px;
	color:#987947;	
}

h3.accordion-title.open:after {
	position:relative;
	content: "\f068";
	font-family: FontAwesome;
	font-size: 20px;
	position: absolute;
	top: 15px;
	right: 15px;	
	color:#987947;
}

div.accordion-content {
	padding: 10px 20px 30px 20px;
	font-size:17px;
}

Now our accordion looks much better.

Styled Accordion Closed:

wordpress accordion

Styled Accordion Open:

wordpress accordion open

Create a Dropdown Select Option Menu from WordPress Custom Menu

Lets create and style a dropdown menu in WordPress using tinyNav and jQuery Selectric.

The WordPress custom menu feature is one of the best features of the WordPress admin. It is super user-friendly with it’s drag and drop interface, ability to add pages, posts, custom post types, custom links and more. If you are building something where you want your menu to be displayed in a select option menu (like you would see on a form dropdown) we can easily integrate that with a WordPress custom menu. For this we will use 2 scripts, tinyNav and jQuery Selectric.

Register a WordPress Custom Menu Area

Add the following code to your functions.php theme file. This will register a new menu area “Primary Menu”.

add_action( 'init', 'my_custom_menus' );
function my_custom_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu' )
        )
    );
}

Create a WordPress Custom Menu

Go to Appearance > Menus and create your menu. Make sure to choose to display this menu in the “Primary Menu” area.

wordpress custom nav

Display a WordPress Custom Menu on your website

Display the code in your theme with (remove the extra spaces):

< ?php wp_nav_menu (array('theme_location' => 'primary-menu','menu_class' => 'nav')); ? >

Now you will see this menu displayed on your website. The styling will depend on your theme’s CSS (but doesn’t matter since we won’t be using this styling for the dropdown).

superfish menu wordpress

Hook up tinyNav to a WordPress custom menu to create dropdown:

You will need to download the tinyNav script and hook this up to your theme.

Next we will connect the tinyNav to the menu we created. Change “menu-main-nav” to the name of the menu you created in the last step.

$("#menu-main-nav").tinyNav({
	active: 'current-menu-item'
});		

Now you will see the new tinyNav menu next to the default menu.

tinynav wordpress menu

Lets remove the default menu.

$( "#menu-main-nav" ).remove();

Now we have just the dropdown menu. But the styling is bland..

tinynav menu

Style a WordPress select option dropdown with jQuery Selectric

Download the JS and CSS files for jQuery Selectric and hook these up to your theme.

Next connect the Selectric script to your tinyNav dropdowns:

$('select.tinynav').selectric({
	maxHeight: 400,
	disableOnMobile: false
});

Now we have what we wanted, a Selectric styled dropdown from a WordPress custom menu.

tinynav selectric menu

If you want to bring this one step further and choose a different theme that’s easy enough. You can of course edit the Selectric CSS to make custom styles or you can download an optional theme skin from the Selectric site.

themes css

selectric dropdown

selectric dropdown

selectric dropdown

selectric dropdown

There it is, hope this helps you out!

What is in the default WordPress .htaccess file

Quick reference of the default WordPress .htaccess file content.

If you run into an issue with your WordPress website (white screen of death, etc) the first thing to check is your .htaccess file. Replacing anything in your .htaccess file with the default WordPress .htacces file is the first thing to do when debugging the issue. After making a backup of your current .htaccess file insert the following.

Default WordPress .htaccess file content:

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

How to remove the Welcome screen from the WordPress dashboard

Lets remove the welcome screen from the WordPress dashboard to clean things up a bit.

wordpress welcome screen

If you are like me and build WordPress websites for clients you most likely prefer to clean up the admin area. One thing I like to remove is the “Welcome” screen in the WordPress dashboard. I like to remove items that may confuse clients. To remove the WordPress welcome screen from the dashboard add the following to your functions.php file:

remove_action('welcome_panel', 'wp_welcome_panel');

Link to or Embed a Vimeo Video at Certain Startpoint

Vimeo doesn’t make it as easy as YouTube does to embed a video at a certain starting point. Luckily with a little piece of code we can solve this issue.

You are most likely used to embedding Vimeo videos on a page with standard embed code such as (without the extra space character):

< iframe src="https://player.vimeo.com/video/188611665" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

Resulting in:

What if you want to start the video at a certain point? Simply add this to the end of your Vimeo code:

#t=01m46s

Adjust the seconds and minutes to choose your start time:

< iframe src="https://player.vimeo.com/video/188611665#t=01m46s" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

Resulting in:

The one issue is that Autoplay is always on. The standard way of shutting off Autoplay doesn’t work with this feature. One solution is to instead link to the video instead of embedding it on the page.

Your link would look like this:

< a href="https://player.vimeo.com/video/188611665#t=01m46s">Open Video

Result:

Open Video

To bring this one step further I would recommend hooking the video up to Fancybox so you could open the video right over the page. And since Autoplay is always on this is a great effect because as soon as Fancybox opens the video in the overlay it starts playing.

Create a Viral Buzz Style Website Blog with WordPress

6 Viral Buzz Style WordPress Themes to build your 9GAG, BuzzFeed or BoredPanda style website.

Are you interested in starting up a Viral Buzz style website like 9GAG, BuzzFeed or BoredPanda? Well luckily now you can. Recently a few amazing Viral Buzz Style WordPress themes have become available. Features include custom post sorting (by favorites, trending, upvotes, etc), animated gifs, videos, quizzes, content snippets, reaction badges, social sharing, NSFW posts, multiple advertising solutions and much more. Using one of these themes is a fun and quick way to start pulling in some some serious money with online advertising. Which is your favorite?

6 Viral Buzz Style WordPress Themes

Redirect Users to and from Login Page for Private WordPress Pages

How to redirect users to the WordPress admin login screen from a private page, and how to allow subscriber role users to view private WordPress pages.

WordPress has a built in feature which allows you to set the visibility of a page. If you set a page to “private” the page will only be visible to people logged onto your website.

wordpress private page

By default if a non-logged-in user visits the page URL they will be directed to the 404 page. In some cases this is fine but in some cases this isn’t very helpful. For example if you wanted to create a private page only for your clients. Say you wanted to post private information that you want them to see but don’t want the public to view. Chances are they would be confused when they see a 404 page after visiting the link you send them. They would most likely be even more confused when you send them a link to the WordPress login page and then after they log in they are at the dashboard, etc. What would be ideal would be if non-logged-in users get directed automatically to the WordPress login screen when clicking on the private page URL and then redirected back to the page after a successful login. We can do this easy enough with a couple steps.

Install Private Content Login Redirect WordPress Plugin

First install this plugin on your WordPress website. There are no configuration options, just install it and activate it.

Now when somebody clicks on the link to your private WordPress page they will be automatically redirected to your WordPress login screen. After logging in they will be redirected back to the page they were originally trying to visit, and now they can view the content on the page.

redirect to admin login wordpress

There is still one issue with this setup though. By default only editor and administrator level users are allowed to read/view private WordPress pages. This doesn’t work in our example where we are making unique users for each of our clients, we obviously don’t want them to have editor or administrator roles to our website, we want them to have the lowest level “subscriber” role.

Allow Subscriber User Roles to View WordPress Private Pages and Posts

Add the following code to your functions.php theme file. This allows subscriber level users to view the page as well.

$subRole = get_role( 'subscriber' ); 
$subRole->add_cap( 'read_private_posts' );
$subRole->add_cap( 'read_private_pages' );

Fini!

Top 150 Most Popular pltts.me Color Palettes

Lets take a look at the top most popular 150 color palettes from pltts.me, a popular color palette website tool & community.

Unfortunately the pltts.me website server failed and so the website is down. If you aren’t familiar this website was a great color palette generator and community with some great color combos. Sorting these by favorite color palettes was a great way to get some inspiration for your design or website project. I figured it would be helpful to put up a reference of the top 150 palettes. You can use a color picker website tool like ColorZilla to grab the color codes from below.

Reference of pltts.me Favorite Color Palettes

1-30

pltts.me favorite color palette

31-60

pltts.me favorite color palette

61-90

pltts.me favorite color palette

91-120

pltts.me favorite color palette

121-150

pltts.me favorite color palette

Stop WordPress from forgetting your Login with Remember Me

An easy way to make WordPress remember you by always having the Remember Me checkbox on the login screen checked.

wordpress remember me

When logging into your WordPress admin you will notice an optional checkbox which says “Remember Me”. This is a useful feature because when checked WordPress will now keep you logged in after you leave the website. What can be annoying about this feature is that you need to remember to check it every time you log into your site. Luckily this can be solved easily.

Install the Remember Me WordPress plugin

Download and install the Remember Me WordPress plugin on your website.

Configure Plugin

Go to Settings > Remember Me.

On this screen you can configure how long WordPress will now remember you and which logins to use it for.

wordpress remember me plugin

How to shut off Auto Rotate & Bullets when there is only one slide – bxSlider

Learn an easy way to change settings on the bxSlider plugin based on the amount of slides, a great tip for dynamically loaded sliders.

If you are using the bxSlider to create slideshows on your website and loading your slideshows dynamically you might want to have different settings based on the amount of slides. For example if you have multiple slides you might want auto-rotate to be turned on. But then if you only have 1 slide you wouldn’t want this one slide to fade in and out (rotate). The same issue would come up for the bullets (paging) or the arrows (controls). Using the code below you can have the slider automatically change the settings based on the amount of slides.

$(document).ready(function(){
  	$('.bxslider').bxSlider({
		mode: 'fade',
		controls: false,
		adaptiveHeight: false,
		auto: ($(".bxslider li").length > 1) ? true: false,
		pager: ($(".bxslider li").length > 1) ? true: false,
		pause: 7000
	});
});

Slider with single slide

slider-with-no-bullets

Slider with multiple slides

slider with bullets

Creative Minimal WordPress Theme Milano

Check out Milano, a minimal style creative WordPress theme perfect for creative professionals!

minimal wordpress theme

Check out the latest WordPress theme from BeantownThemes, Milano! A minimal style creative WordPress theme perfect for portfolios, photographers, architecture, and shops. Milano includes the popular page builder Visual Composer and has 12 complete ready to use demos.

View Demos More Info

A look at the Smart Slider, a free alternative to the Revolution and Layer WordPress Sliders

There’s a new advanced WordPress slider on the market. Lets take a look to see if it can stand up to the other premium slider plugins on the market.

The State of Responsive Sliders

A couple of years ago I wrote a post about how Flash was dead and introduced a ground breaking new image WordPress slider solution called the Revolution Slider. This slider, along with a couple others such as the Layer Slider and Master Slider have quickly become the top selling WordPress slider plugins on the market, with sales in the thousands. Due to overwhelming demand for these sliders the developers had the resources to further the development of their products. It’s amazing how far these sliders have come, from the drag and drop features to the advanced animations.

wordpress drag drop slider

A New Competitor Arises

Recently I was contacted about a new advanced WordPress slider plugin which was just introduced to the the market and I decided to take a look at what it has to offer.

Pricing

The intro had me interested enough for everyone’s first question, “How Much?”. One thing that instantly sets the Smart Slider apart from the competition if that there is a free version of the slider available. This is great news for people that want to setup a simple slideshow on their website.

Pro Features

Although there is a free version the real value comes with the purchase of one of the 2 available license options. Why is it worth purchasing a license? Use your own judgment of course but I tested the full version and it’s definitely worth it. The full version offers additional modes, layers and animations.

prebuilt wordpress sliders

Most importantly purchasing a license gives you access to a TON of different pre-built sliders which you can import to give yourself a jump start. The pre-built sliders are the most impressive that I’ve seen, of any premium slider. There is a large variety of sliders from your typical image sliders to tabbed sliders, carousel, product sliders, one page layouts with nav, restaurant menu setups, modal windows, contact forms and many more. Check out this demo page I created when testing a few of these available sliders, I’m sure you’ll agree they’re impressive.

View Smart Slider Live Demos

Which license version should you purchase?

There are 2 available licenses to choose from, each with increasing options. If you’re a developer who works on multiple sites you may as well purchase the Lifetime license which gives you unlimited support and allows you to use the slider on 50 domains (the equivalent would cost you $950 with the Revolution Slider).

Using the Smart Slider

After purchasing your license you will be able to quickly install your WordPress plugin and activate your license code. Next select a pre-built slider to import and you’ll be ready to go. The editor is really impressive with a 2 column layout which you can collapse into a one column layout for ease of use. I was impressed by how quickly I was able to figure out where the different settings were (who enjoys reading documentation).

smart slider layout

One of the most important features is the ability to edit the slider at different breakpoints. One of the most complicated issues to deal with when creating a responsive slider with multiple layers is what happens when the slider gets down to a tiny size. The Smart Slider has this figured out, now you can readjust everything for the different breakpoints easily with the drag and drop interface.

smart slider

Unique Options

One thing I loved was the live previewing ability of animations and the full slider. As seen below you can choose an animation effect and view it instantly. You can also click play on the slider right from the editor to view what you’re building. Both are obviously super helpful when creating complex slides with multiple layers and animations.

wordpress slider animations

One other unique feature I’m a big fan of is the ability to export the slider to HTML. This is useful for a variety of reasons.

export slider

Final Thoughts

When contacted about the new slider called the Smart Slider I wasn’t sure what to expect. I’m contacted by the developers of a lot of new software products but often times their product offers nothing unique and is just a bland copy of a product already on the market. In this case the opposite was true. I was actually blown away by the features and quality of the Smart Slider. They took an interesting approach with their sales model by letting you try the slider for free and then offering license options with more options and pre-built sliders for once you’re hooked on the product.

Grab your Smart Slider today and let me know if you agree.

Change the default footer text in WordPress admin

Customize the default WordPress admin text to add your info.

The custom footer text in WordPress is boring and not helpful:

wordpress footer text

Customize this by adding the following your your functions.php file (add your own info of course):

function remove_footer_admin () {
echo 'Fueled by <a href="http://www.wordpress.org" target="_blank">WordPress</a> | Website by <a href="http://yourwebsite.com" target="_blank">Awesome Team</a></p>';
    }

add_filter('admin_footer_text', 'remove_footer_admin'); 

Much better!

custom wordpress-footer-text

14 Long Shadow icons, actions and generator resources

A great collection of resources for the long shadow design trend. Icons, actions and shadow generators!

long shadow icons

The long shadow design trend was huge about a year ago. Like many other trends it quickly got abused and most people stopped using the design style, instead completely flat styles are used more commonly. When used correctly and not overdone the long shadow design style can still be an interesting way to draw some attention to certain design elements.

Here is a great collection of 14 long shadow resources, in no particular order. Photohoshop and Illustrator actions, icons sets and even generators so you can easily create your own longs shadow graphic. Have fun!

1. Long Shadow Maker

2. Long Shadow Actions

3. Long Shadow Generator

4. Advanced Long Shadow

5. Social Media Icons

6. Long Shadows Flat Icons Set

7. 160 Social Icons Flat and Long Shadow Bundle

8. Long Shadow Icon Action for Illustrator

9. Long Shadows Flat Outline Social Network Icons

10. Long Shadows Flat Outline Social Network Icons

11. 40 Flat Social Icons

12. Long Shadow Photoshop Actions

13. Long Shadow Icon Generator

14. Long Shadow