Best WordPress snippets

Snippet - this is a short piece of code that performs a certain function and can be reused in development.

In relation to CMS WordPress, using snippets will speed up website creation considerably and help a WordPress developer avoid «reinventing the wheel» when solving their tasks.

In this article we will look at the best, in our opinion, snippets for CMS WordPress that the developers of our company use.

Outputting get_template_part() through a Shortcode

Very often there are situations when you need to insert a piece of code into the WordPress editor. For example, you have written a paragraph of text and after it you want to place a hand-written slider.

So how do you insert a slider into finished code without breaking anything? Of course - by using shortcode. The WordPress repository offers a large number of different sliders that can be embedded in the code using a construction like [slick-slider]. But what if we want to use exactly our own custom slider that we spent so long writing? It is very simple.

We register in functions.php a new shortcode that will return the template with our slider or any other piece of code you need. For this we use the get_template_part () function, then get the contents of the current buffer and clean it with the ob_get_clean function. Now in the editor we can call the shortcode - [slider], which in turn will pull in the template for us slider-part.php. Do not forget that get_header() і get_footer() we do not use in this file!

function slider-shortcode( $attr ) {
	ob_start();
	get_template_part( 'slider-part' );
	return ob_get_clean();
}

add_shortcode( 'slider', 'slider-shortcode' );

The standard WordPress loop

The foundation of WordPress website development is the standard loop that outputs all the posts. This is a frequently used snippet, it takes quite a while to write and you often have to look into the codex to recall how it looks. Here it is

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php the_title(); ?>
<?php endwhile; else : ?>
	<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

A loop that outputs entries from a custom post type

You have created your post type, now you need to output these posts somehow. In this case wp_query {} comes to the rescue. It is a PHP class that gets posts from the database according to the parameters we give it. We set the parameters in the $ args array.

<?php $args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
);

$my_query = null;
$my_query = new WP_Query($args);if( $my_query->have_posts() ) {
	while ($my_query->have_posts()) : $my_query->the_post();
		the_title();
	endwhile;}
wp_reset_query(); ?>

Outputting posts using Bootstrap 3 or 4

This is probably the most frequently asked question on stackoverflow. We all know that in bootstrap 3-4 the columns need to be broken into rows – <div class="”row”"></div>.

The problem is that the standard WordPress loop will output all the posts that are in the database, and that is it. We need to break this loop somehow so that every 3 posts (let's imagine we have a grid of 3 columns) are broken into a row. For this we use wp_query. And now the most magical and simple part – we simply wrap every 4 elements of the loop in <div class="”row”"></div> using a simple construction:

if($i % 4 == 0) { ?>
	<div class="row">
<?php } ?>

Now we need to close the div. We close it with a similar construction:

<?php $i++; if($i != 0 && $i % 4 == 0) { ?>
	</div><!--/.row-->
	<div class="clearfix"></div>
<?php } ?>

To be safe, we add <div class="”clearfix”"></div> so that Bootstrap 3, which still uses float, breaks the columns into rows.

Final code:

<?php $args=array(
'post_type' => 'portfolio',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$my_query = null;
$my_query = new WP_Query($args);if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post();
	if($i % 4 == 0) { ?>
	<div class="row">
		<?php } ?>
		<div class="col-md-3">
			<?php the_title(); ?>
		</div>
		<?php $i++; if($i != 0 && $i % 4 == 0) { ?>
	</div><!--/.row-->
	<div class="clearfix"></div>
<?php } endwhile; wp_reset_query(); }?>

Enqueuing styles and scripts in WordPress

There are several ways to enqueue scripts and styles in a theme. Let's look at the most popular ones:

Enqueuing directly into the page

I think almost every developer who has enqueued style files wanted to go straight into header.php and include the style using the standard construction:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles.css">

This option will work, but doing it this way is wrong, because some caching plugins such as WP Total Cache will not be able to see and process styles enqueued in this way. 

Hooking into functions.php

Let's look at the correct option that we recommend using in development. We will use a function that is hooked in the file functions.php :

function name(){ wp_enqueue_style( 'foundation-min-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all'); wp_enqueue_script('app-js', get_template_directory_uri() . '/js/app.js', array(), '1.0.0', true); } add_action( 'wp_enqueue_scripts', 'name' );

wp_enqueue_style - a function that registers the stylesheet

wp_enqueue_script - a function that registers js files

You can read more about these functions in the official documentation.

After registering the styles we need to call our function. For this we use - add_action - wp_enqueue_scripts.

Registering and outputting a menu in the theme

One of the most frequent questions in Google search from WordPress developers. How do I output a «menu»? How do I register it? It is all very simple. First we add a function that will create the menu we need and show it in the WordPress admin area. Into the function we pass an array with the number of «menus» we need. In the example we will create one menu - topmenu

register_nav_menus(array('top'=>'topmenu'));

We registered the «menu» and added a few items to this «menu» in the admin panel. Next we need to output it somewhere.

In the theme we insert this code using the wp_nav_menu function. In the array we pass the menu we need to output and wrap it in the classes and tags we need.

<?php wp_nav_menu( array (
	'menu' => 'topmenu',
	'items_wrap' => '<ul class="mobile_menu text-left main_menu" data-dropdown-menu>%3$s</ul>'
)); ?>

How to limit the number of characters in the the_excerpt() function

The the_excerpt () function outputs all the content we put into the post excerpt. Very often you need to output all of its content in the post itself, but, for example, on the category page where we have a grid of posts - output only the first 20 characters and hide the rest behind dots (…)

To do this we create a function in functions.php

function excerpt($limit) {
	$excerpt = explode(' ', get_the_excerpt(), $limit);
	if (count($excerpt)>=$limit) {
	array_pop($excerpt);
	$excerpt = implode(" ",$excerpt).'...';
	} else {
	$excerpt = implode(" ",$excerpt);
	}
	$excerpt = preg_replace('`[[^]]*]`','',$excerpt);
	return $excerpt;
}

We pass our get_the_excerpt () into it and check whether it matches the specified number of characters, add 3 dots and return the variable with our content. Now, in the place we need, we call the function and pass into it the number of characters we need

<?php echo excerpt(20) ?>

Adding an options panel using Advanced Custom Fields PRO

Very often we have to give the client the ability to change the content used across all the pages of the website. For example: the logo, phone numbers, e-mail in the header and so on.

For this we can use the standard WordPress meta fields, but I think they are extremely inconvenient and have an unattractive design. It is best to use the «ACF PRO» plugin for this (you can read more about this plugin in our article «Top 10 plugins for WordPress»).

First we need to register our options panel in functions.php.

if( function_exists('acf_add_options_page') ) {
	acf_add_options_page(array(
		'page_title'     => 'Theme Settings',
		'menu_title'    => 'Theme Settings',
		'menu_slug'     => 'theme-general-settings',
	));
}

In the array we set the page title and the menu title.

After that we add our field group in the ACF plugin panel. Lower on the page we specify that it belongs to our options panel - theme settings.

A menu item responsible for our settings panel will appear in the admin area. We fill in all the data. In our case it is the logo and the phone number.

Next we need to output the fields we created in the theme, in the place we need. It is done simply:

- will return the url of the image

- will return the text, in this case the phone number we entered on the options page.

Disabling all WordPress updates

There are cases when you need to protect the client from unnecessary actions in the admin panel. If the client has full access to the admin area and all its sections, there is a danger that a person who does not know the specifics of CMS WordPress will update all the plugins and the core itself. In that case conflicts can arise between the new versions of plugins and the WP core. To avoid such problems you need to turn off updates. It is done quite simply - we add a few filters to the functions.php file

// wordpress updates add_filter('pre_site_transient_update_core',create_function('$a', "return null;")); wp_clear_scheduled_hook('wp_version_check'); // plugin updates remove_action( 'load-update-core.php', 'wp_update_plugins' ); add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) );

How to register a Custom post type

Above we looked at how to output entries from a custom post type. Now we will look at how to create a custom post type so that it appears in the admin panel.

The task is this: WordPress has Posts and Pages - usually posts are used for News or a Blog. Pages - for static pages. Let's say we need to create a separate post type - Products. For this we go to the functions.php file and register our custom post type

// Register Custom Post Type function custom_post_type() { $labels = array( 'name' => _x( 'Post Types', 'Products', 'text_domain' ), 'singular_name' => _x( 'Post Type', 'Product', 'text_domain' ), 'menu_name' => __( 'Products', 'text_domain' ), 'name_admin_bar' => __( 'Products', 'text_domain' ), 'archives' => __( 'Item Archives', 'text_domain' ), 'attributes' => __( 'Item Attributes', 'text_domain' ), 'parent_item_colon' => __( 'Parent Item:', 'text_domain' ), 'all_items' => __( 'All Items', 'text_domain' ), 'add_new_item' => __( 'Add New Item', 'text_domain' ), 'add_new' => __( 'Add New', 'text_domain' ), 'new_item' => __( 'New Item', 'text_domain' ), 'edit_item' => __( 'Edit Item', 'text_domain' ), 'update_item' => __( 'Update Item', 'text_domain' ), 'view_item' => __( 'View Item', 'text_domain' ), 'view_items' => __( 'View Items', 'text_domain' ), 'search_items' => __( 'Search Item', 'text_domain' ), 'not_found' => __( 'Not found', 'text_domain' ), 'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ), 'featured_image' => __( 'Featured Image', 'text_domain' ), 'set_featured_image' => __( 'Set featured image', 'text_domain' ), ); $args = array( 'label' => __( 'Post Type', 'text_domain' ), 'description' => __( 'Post Type Description', 'text_domain' ), 'labels' => $labels, 'supports' => false, 'taxonomies' => array( 'category', 'post_tag' ), 'hierarchical' => false, 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 5, 'show_in_admin_bar' => true, 'show_in_nav_menus' => true, 'can_export' => true, 'has_archive' => true, 'exclude_from_search' => false, 'publicly_queryable' => true, 'capability_type' => 'page', ); register_post_type( 'post_type', $args ); } add_action( 'init', 'custom_post_type', 0 );

Do not be scared by the huge number of parameters. Mostly these are translations and titles of menu items like "Add product", "All products" and so on.

A description of each parameter of the array can be found in the official WordPress documentation

https://codex.wordpress.org/Function_Reference/register_post_type

Study the parameters of the $ args array carefully. After registering the post type you will see the "Products" section in your menu.

We will be grateful for your comments and questions, they inspire us to write new interesting articles!