WordPress Functions.php Code Snippets

These are some code snippets I use frequently in a WordPress theme functions.php file. Feel free to bookmark! I already have! (Obviously you’ll need to replace the nomenclature). I’m sure I’ll be updating this one regularly. I’m not offering any long explanation – if these don’t work for you or are too simplistic just Google around for something else that suits!

Shortcodes

This one is super handy for adding in a simple shortcode to use in your editor. I often use this to wrap a div around a paragraph for highlighting as follows:

[shortcode-name]Some text I want to highlight here.[/shortcode-name]

// Add Shortcode
function yourtheme_shortcode-name( $atts , $content = null ) {
    return "<div class='yourclass'>".do_shortcode($content)."</div>";
}
add_shortcode( 'shortcode-name', 'yourtheme_shortcode-name' );

Best practice to load in Google Fonts & Font Awesome in functions file.

You must use the wp_enqueue_scripts action. 

Option 1

Individually load a style – this is handy if you just want to load Google Font in a child theme.

//Enqueue Google Fonts
function load_googlefonts() {
    wp_enqueue_style( 'googlefonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,700', false ); 
}
add_action( 'wp_enqueue_scripts', 'load_googlefonts' );

Option 2

If you’re using a Framework you might have function to load all scripts & styles – as follows. Hook in other scripts or styles here too.

function wp_enqueue_all_scripts(){
   //add google fonts
   wp_enqueue_style('googleFonts', 'https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,400italic,700');
 
   //add font awseome - check version number
   wp_enqueue_script( 'fontawesome', 'https://use.fontawesome.com/8ff490dbbf.js', true );
}
add_action('wp_enqueue_scripts', 'wp_enqueue_all_scripts', 999);

Adding Slick Slider

My favourite Slider for WordPress is Slick Slider. It’s free – with everything you need (for creating a theme from scratch – you will have to create a custom post type to handle the front end management of slides). I’ve used it loads of times. The following lines are added to your functions.php – within a wp_enqueue_all_scripts function (the way I usually do it).

Note 1) I am only loading the script on a page called ‘welcome’). Why load all that stuff on other pages where there is not slider? Sometimes it gets a bit tricky remembering which conditional tag to use if you’ve set your blog for the homepage or are using a page – review this part of WordPress’s using Conditional Tags to work it out (I recently got stuck on this for ages – I should know better at this stage).

I won’t go into loads of detail here – obviously you need to head to Slick Slider and download the folder (or use GIT) and add it to your Theme and make sure your paths are correct.

Note 2) – you will need to create the slick-init.js file and add it to your Theme – this is where you initiate Slick Slider. See below for an example.

Within your wp_enqueue_all_scripts function in functions.php :

function wp_enqueue_all_scripts(){
    
    //add slick slider
    wp_register_style('slickcss', get_template_directory_uri()."/path_to/slick/slick.css" ); 
    wp_register_style('slickcsstheme', get_template_directory_uri()."/path_to/slick/slick-theme.css" ); 
    
    //load slick js
    wp_register_script('slickslider', get_template_directory_uri()."/path_to/slick/slick.min.js", array(jquery), '', true );
    
    ////load slick initiate script
    wp_register_script( 'slickinit', get_template_directory_uri() . '/path_to/js/slick-init.js');
    
    // load slick on homepage
    if ( is_page('welcome')){
         wp_enqueue_style( 'slickcss' ); 
         wp_enqueue_style( 'slickcsstheme' ); 
         wp_enqueue_script ('slickslider');
         wp_enqueue_script ('slickinit');
    }
}
add_action('wp_enqueue_scripts', 'wp_enqueue_all_scripts', 999);

I decided to include the Slick init file as it always messed me up in the past with all the correct syntax to make JQuery work properly with WordPress. This script doesn’t go into the functions file (though you do call the file (slick-init.js) from the above functions.php). Create the Slick-init.js and save it in your theme (in the scripts folder for example) – make sure the file name is the same as what you’re calling the above functions.php file.

jQuery(document).ready(function ($) { $(window).load(function () { $('.homeslider').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); }); });

Scroll to The Top

I just spent an hour fiddling with some JQuery “plugin” that doesn’t work. This little bit of script from WPBeginner does work but the CSS/HTML is a bit overblown so I use my own – it does require FontAwesome for the arrow. And yes you’ll need jQuery too.

jQuery(document).ready(function($){
   $(window).scroll(function () {
      if ($(this).scrollTop() < 200) {
        $('#gotop').fadeOut();
      } else {
        $('#gotop').fadeIn();
      }
   });
 
   $('#gotop').on('click', function () {
      $('html, body').animate({
         scrollTop: 0
      }, 'fast');
      return false;
   });
}

CSS

#gotop {
 display: none;
 z-index: 999;
 position: fixed;
 width: 40px;
 height: 40px;
 background-color: rgba(0, 0, 0, 0.3);
 font-size: 20px;
 text-align: center;
 color: #fff;
 right: 30px;
 bottom: 30px;
 cursor: pointer;
}

HTML

<a href="#top" id="gotop" class="fa fa-chevron-up"></a>
Tagged as:
  • Philipp Bammes

    I’m the author of WordPress plugin Slick Slider (https://wordpress.org/plugins/slick-slider/). It turns native WordPress galleries into sliders utilizing the slick jQuery plugin you are using too.
    If you are interested, give it a try, it’s free and comes w/o annoying ads.

    • Thanks for dropping by Philipp – I’ll be sure to check it out!