15 Helpful WordPress Scripts

in
15 Helpful WordPress Scripts

15 Helpful WordPress scripts

I have gathered a list of 15 Helpful WordPress scripts that will help you with your WordPress website. If you have more helpful links to more great scripts don’t be afraid to post them in the comments below!

New to WordPress and need help finding the right WordPress hosting or just on the market for new hosting? Have a look at Best WordPress Hosting 2017!

1. Calling jQuery properly

jQuery(document).ready(function($) {
// $() begin your jQuery function here.
});

I see a lot of WordPress theme’s still being published today that load jQuery incorrectly. WordPress already includes jQuery in the core library. So all you need to do is wrap your jQuery properly. This is the proper way to enqueue jQuery in your theme.

But why not just include it in the header.php or functions.php?

Using jQuery in the header via script tag, functions.php or even footer.php is not recommended as it can mess with other plugins that might include jQuery such as WooCommerce. Doing it this way could help prevent long nights of research, trying to figure out why your jQuery isn’t working in your theme. That is why we use the noconflict tag in a scripts.js file and enqueue them properly using the method above.

Source:
WordPress Codex

2. Call your WordPress scripts properly

function yourtheme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900', false );
wp_enqueue_script( 'scripts', get_template_directory_uri() . '/scripts.js', array ( 'jquery' ), '1.0.1', true );
}

add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );

This was a common mistake that I always made. I always grabbed the script tag and placed it in the header or footer or wherever it needed to be. I started using the proper way to enqueue my WordPress scripts and styles not to mention google fonts. Place this code in the functions.php file. If it’s a stylesheet place it below the wp_enqueue_style( ‘style’, get_stylesheet_uri() ); code. If it’s a jQuery or JavaScript file, it might be best to place it under the google font, so that the google font loads before the scripts load.

The true on the end of the tag, tells the php to load the script.js link at the bottom of the footer file. False would link the script.js file at the top in the header below the style links. Using this method allows us to enqueue everything with one hook.

Source:
WordPress Codex

3. Allow SVG in WordPress Media Upload

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Sometimes I have wanted to add .svg files when uploading to the WordPress Media Library. A Lot of the time I use it for responsive screens and vector icons and logo’s that display .svg as vector based graphics instead of pixel based blurry graphics. But WordPress does not allow this without a bit of code to help. This code would also go into the bottom of your functions.php file and should allow the use of .svg file types in your Media Library.

There is also a plugin available made by Sterling Hamilton called Scalable Vector Graphics (SVG) which can easily be used for a fast alternative to adding the code in your functions.php file.

Source:
CSS Tricks

4. Use WordPress Custom Fields

Have you ever ran into the problem where your theme doesn’t have available text spot to add an address or a phone number or any other type of content? WordPress comes with built in solution for this called Custom Fields. You can utilize your custom fields by simply calling a function in your theme and setting up the custom field on an edit screen on a “Page” of your WordPress Website. You can use this custom field on any theme file within your theme.

To call it simply use: <?php echo get_post_meta(‘PAGE # ex: 5’, ‘Custom Field Name’, true);?>
PAGE # ex: 5 is the page that you have used setup the custom field on. You can see this in the browser URL: http://yourwebsite.com/wp-admin/post.php?post=5&action=edit
Your page number will depend on the order in which you setup your pages and posts.
Custom Field Name is the name you used to setup the Custom Field.
True returns the result.
You can learn more from the source below.

Alternatively you can use a plugin such as: Advanced Custom Fields

Source:
WordPress Codex

5. Hook WooCommerce into your theme

unhook the WooCommerce wrappers:
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

hook in your own functions to display the wrappers your theme requires:
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
echo '<section id="main">';
}

function my_theme_wrapper_end() {
echo '</section>';
}

Declare WooCommerce support
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}

Often times I am working with a client or even a website of my own where I might need to use WooCommerce E commerce plugin. And sometimes I just so happen to create a custom theme or choose a theme that may not work well with WooCommerce. Using the code above allows me to hook WooCommerce into my theme, to properly display my theme’s header and footer information and the content of WooCommerce. You can read more on this in the source below.

Source:
WooCommerce Docs

6. Helpful tip: Adding a favicon

This one isn’t so much of a helpful WordPress scripts, it’s more of a WordPress helpful tip. I notice an incredible amount of websites that use custom header links to favicon’s and scaleable icons for smaller devices. I myself am guilty of doing this at one point or another.

When you “customize” your theme using the customizer in the admin dashboard, there is an option to upload your favicon here location in the “Site Identity” section. This will cover all of your logo’s and favicon’s on all devices and automatically display in your theme without the need to use links in the header.php.

Source:
WordPress Codex

7. Registering a simple sidebar

function yourthemename_widgets_init() {

register_sidebar( array(
'name' => __( 'Main Sidebar', 'yourthemename' ),
'id' => 'main-sidebar',
'description' => __( 'This is the Main Sidebar.', 'yourthemename' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h5 class="widgettitle">',
'after_title' => '</h5>',

) );

}
add_action( 'widgets_init', 'yourthemename_widgets_init' );

You can place this code in your functions.php file of your theme. To call it you can use <?php get_sidebar() ?> in your theme’s template files. This will register a sidebar which you can use in your theme wherever you wish. You can edit the sidebar in your WordPress Dashboard under “Widgets”. You can read more on this in the source below.

Source:
WordPress Codex

8. Choosing the right WordPress Webhost

This is another WordPress Helpful Tip rather than a helpful WordPress Scripts. Clients come to me often and ask about hosting. “I’ve heard that WordPress is bulky and sluggish and requires more to run it“. I’ve even had people come to me and say my website is down so much my host is always making changes.

Make sure no matter who you choose that they fully support WordPress Hosting and offer true power at a low price. You do not need to pay a lot of money to host a WordPress website. Also make sure that the host is prepared for known local attacks such as Brute Force Login. Make sure they can take your site and protect it properly. I personally use Inmotion Hosting as they have everything listed above and take care of me with 24/7 support if anything goes wrong. I have never had any downtime on any of my websites.

Source:
InMotion Hosting

9. Check your blog posts

Sometimes I see issues with blog posts on the index or main blog posts page being to long. I’ve also found it handy to know when and where I can use the excerpt or the content at and what the difference is.

<?php the_excerpt() ?>
Displays the excerpt of the current post after applying several filters to it including auto-p formatting which turns double line-breaks into HTML paragraphs. It uses get_the_excerpt() to first generate a trimmed-down version of the full post content should there not be an explicit excerpt for the post.

<?php the_content() ?>
Display’s all of the post content that belongs to the entire post or page.

Displaying the excerpt can be useful when creating custom templates like a custom home page where you might display the excerpt of a post rather than the entire content of the post if you wanted to show a post on your home page for example. You can read more about the_excerpt() in the source link below!

Source:
WordPress Codex

10. HTML5 Searchform

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
<button type="submit" class="search-submit" />Search</button>
</form>

Instead of using the default WordPress scripts searchform that WordPress provides you can create your own HTML5 search form using the code above. Simply create a new file called searchform.php within your theme files and place the code above inside. This allows you to use modern code and style it a little bit easier using CSS3. You can view more in the Source link below.

Source:
WordPress Codex

11. Custom Logo in your theme

add_theme_support( 'custom-logo' );
function themename_custom_logo_setup() {
$defaults = array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

At one time, I wanted to make a custom logo for my WordPress theme. I used the old route of making a custom header with the logo in a folder labeled “images”. After a while I thought there must be a better way of grabbing the logo being as it is WordPress. So I dug around until I looked into the WordPress Codex and found the above code which I added to the functions.php and called it in my header.

This allowed me to “Customize” my theme in the admin dashboard and change the logo or choose not to use a logo and use text instead, using this script. If you want to find out more about integrating Custom Logo’s into your WordPress theme check out the source link below.

Source:
WordPress Codex

12. Adding dynamic custom copyright in your theme footer

Add this to your theme’s functions.php file
function comicpress_copyright() {
global $wpdb;
$copyright_dates = $wpdb->get_results("
SELECT
YEAR(min(post_date_gmt)) AS firstdate,
YEAR(max(post_date_gmt)) AS lastdate
FROM
$wpdb->posts
WHERE
post_status = 'publish'
");
$output = '';
if($copyright_dates) {
$copyright = "© " . $copyright_dates[0]->firstdate;
if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
$copyright .= '-' . $copyright_dates[0]->lastdate;}
$output = $copyright;}
return $output;}

And add this to your theme’s footer template file.
<?php echo comicpress_copyright(); ?>

This is a copyright solution that works very well when creating a copyright in the theme footer and produces: © 2009 – 2017
You could add on to this to add:

<?php echo comicpress_copyright(); ?> <a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php bloginfo(); ?>”><?php bloginfo(); ?></a>

This would display as:  © 2009 – 2017 Your Website
It will link back to the default URL of the WordPress install and display Your Website Name using bloginfo();

Source:
WordPress Beginner

13. Use Custom Header for Home Page top image

Add this code to the functions.php file.
function mytheme_setup() {
add_theme_support('custom-logo');
}

add_action('after_setup_theme', 'mytheme_setup');
add_image_size('mytheme-logo', 319, 84);
add_theme_support('custom-logo', array(
'size' => 'mytheme-logo'
));

Place this code where you use your header image.
<img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”” />

You can use the WordPress admin dashboard to “Customize” your theme. This will allow you to replace the header image with whatever image you desire, as long as it’s the right size. Another nifty tip: you can choose multiple images and you can also randomize the header images. This is a quick solution to adding a header image. You can read more on the Custom Header Image in the source link below.

Source:
WordPress Codex

14. Create Custom WordPress Menu’s

First, add this to your functions.php file to register the menu’s.
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

Register a menu within your theme template with this code.
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

This will register your menu’s in your functions file. You can go to your admin screen then go to menus and create a new menu. When you name the new menu, that name will be the name you replace ‘Header Menu’ with your new name. This is helpful if you want to create a new menu within your theme. You can create as many as you would like and place them wherever you would like for example in the footer you might want a Footer Menu. You can learn more about the Custom Menu in the source link below.

Source:
WordPress Codex

15. Add Admin footer credits

add_action('admin_footer', 'my_admin_footer_function');
function my_admin_footer_function() {
echo '<p>This will be inserted at the bottom of admin page</p>';
}

If you need to put credits on the admin dashboard, maybe to let your clients know how to get in touch with you or to simply show who built the website. You can use the code above to insert your call to action in the footer. You can change it to say whatever you would like. Place this code inside of your functions.php file. You can learn more about this function in the source link below.

Source:
WordPress Codex

Conclusion

These are 15 helpful WordPress scripts that you can use in your WordPress site, with or without plugins. This is mostly a reference list of WordPress scripts for myself, but maybe some other people might find this helpful as well. If you have any other helpful WordPress Scripts or helpful plugins of any kind I’d love to hear more in the comments below.

Post a comment

by