Code Snippets

The quickest way to use this section is to search using a search term.

Have you contributed your favorite snippets yet? Check your submissions using the link attached to your welcome message in the header.

Snippets include php, javascript or css code to help customise your site. If you wish to add some helpful bits of code you can submit it here for review. All contributions welcome!

Language:           Keyword:             
Active Class for Nav Items in Pro
Place this inside your Theme Options > Customize and it will apply your interaction styles to active menu items.
See this code in use here: im.wpdevurl.com
Submitted by: Donald McGuinn
Language: JavaScript

Auto Update Copyright for Footer (New X Version Compatible)
Add this section to your child theme's function.php file and then use the shortcode below where you need the current year.
[year]
See this code in use here: 
Submitted by: Donald McGuinn
Language: PHP

Copyright Dynamic Year and Company Name – Another version
Enter this into the Appearance>Customise.Footer>Footer Content, changing "2006" to the start year of your business/website, along with the url and other relevant info for your site.
This should show
© 2006-2017 Bell Lodge Backpackers Ltd All rights reserved.
** Issues please contact me (RickM) on the FB Group XthemeUsers
See this code in use here: www.bell-lodge.nz
Submitted by: Rick M
Language: JavaScript

Dropcap without shortcode and html
If you use the Dropcap in your designs, you are probably familiar with A Shortcode. An alternative may be wrapping the first letter into a tag, and target that letter. However, there are some important things to know about Dropcaps. Firstly, it is boring and time consuming to write the shortcode every time, and secondly, Dropcaps don't show up in Excerpts. Also, Google does index them properly, but still they are extra "junk" in the copy. So how to solve those problems? Simple. With CSS. All you need to do is add the class "drcp" to the section where you want first paragraph to have the dropcap, and add the provided CSS to the Customizer or style.css. That will mimick the original X-dropcap, but you are welcome to alter the CSS and make your own design.
See this code in use here: 
Submitted by: Miroslav Meduric
Language: CSS

Copyright Dynamic Year and Company Name
This code snippet placed in the footer area in the X CS customiser will give you:
© 2017 . Company Name

NOTE: Remember to change the start date and company name.

See this code in use here: www.kcgraphics.co.uk
Submitted by: Karen Cooper
Language: JavaScript

Change header font sizes
Pretty easy to use, simply add to the CS customiser and edit the sizes and padding etc. as required.
See this code in use here: www.kcgraphics.co.uk
Submitted by: XAdmin
Language: CSS

Left Align Stacked Logo
See this code in use here: 
Submitted by: XAdmin
Language: CSS

Change Color of Menu Item
See this code in use here: 
Submitted by: XAdmin
Language: CSS

Center Images
See this code in use here: xtheme.kcgdemo.com
Submitted by: Donald McGuinn
Language: CSS

Customize Scroll to Top Anchor
See this code in use here: 
Submitted by: XAdmin
Language: CSS