{"id":1713,"date":"2019-04-21T20:45:47","date_gmt":"2019-04-21T17:45:47","guid":{"rendered":"https:\/\/esfirum.com\/?p=1713"},"modified":"2021-11-30T10:51:12","modified_gmt":"2021-11-30T07:51:12","slug":"best-wordpress-snippets","status":"publish","type":"post","link":"https:\/\/esfirum.com\/en\/blog\/best-wordpress-snippets\/","title":{"rendered":"Best WordPress snippets"},"content":{"rendered":"

Snippet<\/strong> is a short piece of code that performs a specific function and can be reused in development.<\/p>\n

Regarding CMS WordPress – the use of snippets will significantly speed up the creation of a website and help the wordpress-developer “not reinvent the wheel” in solving their problems.<\/p>\n

In this article, we will look at the best, in our opinion, snippets for CMS WordPress, which are used by the developers of our company.<\/p>\n

Get_template_part() output via Shortcode<\/h2>\n

Very often there are situations when you need to insert a piece of code into the WordPress editor. For example, you wrote a paragraph of text, after which you want to put a manually written slider.<\/p>\n

How to insert the created slider into the finished code so as not to break anything? Of course – using a shortcode<\/strong>. The WordPress repository provides a large number of different sliders that can be embedded into your code using a construction like [slick-slider]<\/strong>. But what if we want to use our own custom slider, which we have been writing for so long? Everything is very simple.<\/p>\n

We register a new shortcode in functions.php<\/strong> that will return us a template with our slider or any other code fragment you need. To do this, we use the function – get_template_part()<\/strong>, then get the contents of the current buffer and clean it up with the function – ob_get_clean<\/strong>. Now in the editor we can call the short code – [slider]<\/strong>, which in turn will pull up the slider-part.php<\/strong> template. Don’t forget that we don’t use get_header()<\/strong> and get_footer()<\/strong> in this file!<\/p>\n

function slider-shortcode( $attr ) {\r\n\tob_start();\r\n\tget_template_part( 'slider-part' );\r\n\treturn ob_get_clean();\r\n}\r\n\r\nadd_shortcode( 'slider', 'slider-shortcode' );\r\n<\/pre>\n
Standard WordPress Loop<\/h2>\n
The backbone of WordPress website development is a standard loop that displays all posts. This is a frequently used snippet, it takes a long time to write and you have to look at the code often in order to understand how it looks. Here he is<\/p>\n
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\r\n\t<?php the_title(); ?>\r\n<?php endwhile; else : ?>\r\n\t<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?><\/p>\r\n<?php endif; ?><\/pre>\n
Loop that outputs posts with custom post type<\/p>\n
You have created your own type of records, now you need to display these records somehow. This is where wp_query{} comes to the rescue. This is a PHP class that receives records from the database according to the parameters that we give it. We specify the parameters in the $args array.<\/p>\n
<?php $args=array(\r\n'post_type' => 'artist',\r\n'post_status' => 'publish',\r\n'posts_per_page' => -1,\r\n);\r\n\r\n$my_query = null;\r\n$my_query = new WP_Query($args);if( $my_query->have_posts() ) {\r\n\twhile ($my_query->have_posts()) : $my_query->the_post();\r\n\t\tthe_title();\r\n\tendwhile;}\r\nwp_reset_query(); ?><\/pre>\n
Displaying posts using Bootstrap 3 or 4<\/h2>\n
Probably the most frequently asked question on stackoverflow. We all know that in bootstrap 3-4 – columns need to be split in rows – <div class=\u201drow\u201d><\/div>. The problem is that the standard WordPress loop will display all the posts that are in the database and that’s it. We need to somehow break this cycle so that every 3 posts (imagine that we have a grid of 3 columns) are split side by side (row). For this we use wp_query. And now the most magical and simple thing – we just wrap every 4 elements of the loop in <div class=\u201drow\u201d><\/div> using a simple construction:<\/p>\n
if($i % 4 == 0) { ?>\r\n\t<div class=\"row\">\r\n<?php } ?><\/pre>\n
Now we need to close div. We close with this construction:<\/p>\n
<?php $i++; if($i != 0 && $i % 4 == 0) { ?>\r\n\t<\/div><!--\/.row-->\r\n\t<div class=\"clearfix\"><\/div>\r\n<?php } ?><\/pre>\n
Add\u00a0 <div class=”clearfix”><\/div> so that Bootstrap 3, which is still on float, breaks columns in rows.<\/p>\n
Ready code:<\/p>\n
<?php $args=array(\r\n'post_type' => 'portfolio',\r\n'post_status' => 'publish',\r\n'posts_per_page' => -1,\r\n);\r\n$my_query = null;\r\n$my_query = new WP_Query($args);if( $my_query->have_posts() ) {\r\n\r\nwhile ($my_query->have_posts()) : $my_query->the_post();\r\n\tif($i % 4 == 0) { ?>\r\n\t<div class=\"row\">\r\n\t\t<?php } ?>\r\n\t\t<div class=\"col-md-3\">\r\n\t\t\t<?php the_title(); ?>\r\n\t\t<\/div>\r\n\t\t<?php $i++; if($i != 0 && $i % 4 == 0) { ?>\r\n\t<\/div><!--\/.row-->\r\n\t<div class=\"clearfix\"><\/div>\r\n<?php } endwhile; wp_reset_query(); }?><\/pre>\n
Connecting styles and scripts in WordPress<\/h2>\n
There are several options for including scripts and styles in a theme. Let’s consider the most popular ones:<\/p>\n
Connecting directly in <head> of the page<\/h3>\n
I think that almost every developer who included style files wanted to immediately get into header.php and connect the style using the standard construction:<\/p>\n
<link rel=\"stylesheet\" href=\"<?php echo get_template_directory_uri(); ?>\/styles.css\"><\/pre>\n
This option will work, but it is wrong to do so, since some caching plugins such as WP Total Cache will not be able to see and process the styles connected in this way.<\/p>\n
Connecting in functions.php<\/h3>\n
Let’s consider the correct option, which we recommend using in development. We will use a function that is included in the functions.php file:<\/p>\n
function name<\/em>(){\r\n\twp_enqueue_style( 'foundation-min-css', get_template_directory_uri() . '\/css\/style.css', array(), '1.0.0', 'all');\r\n\twp_enqueue_script('app-js', get_template_directory_uri() . '\/js\/app.js', array(), '1.0.0', true);\r\n}\r\n\r\nadd_action( 'wp_enqueue_scripts', 'name<\/em>' );<\/pre>\n
wp_enqueue_style – function that registers the stylesheet<\/p>\n
wp_enqueue_script – function that registers js files<\/p>\n
You can read more about these functions in official documentation<\/a>.<\/p>\n
After registering the styles, we need to call our function. For this we use – add_action – wp_enqueue_scripts.<\/p>\n
Registration and display of the menu in theme<\/h2>\n
One of the most frequently asked questions in Google searches from wordpress developers. How do I display the “menu”? How do I register it? Everything is very simple. First, let’s add a function that will create the menu we need and display it in the WordPress admin area. In the function, we pass an array with the number of “menus” that we need. In the example we will create one menu – topmenu<\/p>\n
register_nav_menus(array('top'=>'topmenu'));<\/pre>\n
We registered the “menu”, added several items of this “menu” to the admin panel. Next, you need to bring it out somewhere.<\/p>\n
\"\u0412\u044b\u0432\u043e\u0434<\/p>\n
In the subject – we insert the following code using the wp_nav_menu function. We pass to the array – the menu that needs to be displayed + wrap it in the classes and tags we need.<\/p>\n
<?php wp_nav_menu( array (\r\n\t'menu' => 'topmenu',\r\n\t'items_wrap' => '<ul class=\"mobile_menu text-left main_menu\" data-dropdown-menu>%3$s<\/ul>'\r\n)); ?><\/pre>\n
 <\/p>\n
\"esfirum<\/p>\n
How to limit the number of characters in a function the_excerpt()<\/h2>\n
Function the_excerpt() displays all the content that we will put in the short content of the post. Very often you need to display all its content in the post itself, and for example, on the category page, where we have a grid with posts, display only the first 20 characters, hide the rest under dots (…)<\/p>\n
To do this, create a function in functions.php<\/p>\n
\"\u0432\u044b\u0432\u043e\u0434<\/p>\n
function excerpt($limit) {\r\n\t$excerpt = explode(' ', get_the_excerpt(), $limit);\r\n\tif (count($excerpt)>=$limit) {\r\n\tarray_pop($excerpt);\r\n\t$excerpt = implode(\" \",$excerpt).'...';\r\n\t} else {\r\n\t$excerpt = implode(\" \",$excerpt);\r\n\t}\r\n\t$excerpt = preg_replace('`[[^]]*]`','',$excerpt);\r\n\treturn $excerpt;\r\n}<\/pre>\n
We transfer our – get_the_excerpt() and check if it matches the specified number of characters, add 3 dots and return a variable with our content. Now in the place we need – we call the function and pass into it the number of characters that we need.<\/p>\n
<?php echo excerpt(20) ?><\/pre>\n
Adding a panel with options using Advanced Custom Fields PRO<\/h2>\n
Very often we have to add the ability for the client to change the content that is used on all pages of the site. For example: logo, phone numbers, e-mail, etc.<\/p>\n
We can use standard WordPress meta fields for this, but I find they are extremely awkward, with an unattractive design. For this, it is best to use the plugin “ACF PRO” (you can read more about this plugin in our article \u00abBest WordPress plugins\u00bb<\/a>).<\/p>\n
First, we need to register our options panel in functions.php.<\/p>\n
if( function_exists('acf_add_options_page') ) {\r\n\tacf_add_options_page(array(\r\n\t\t'page_title'\u00a0\u00a0\u00a0\u00a0 => 'Theme Settings',\r\n\t\t'menu_title'\u00a0\u00a0\u00a0 => 'Theme Settings',\r\n\t\t'menu_slug'\u00a0\u00a0\u00a0\u00a0 => 'theme-general-settings',\r\n\t));\r\n}<\/pre>\n
Specify the page title, menu title, slug in the array.<\/p>\n
After that, in the ACF plugin panel, add our group of fields. Below on the page, we indicate that it belongs to our options panel – theme settings.<\/p>\n
\"\u043f\u0440\u0438\u043c\u0435\u0440<\/p>\n
In the admin panel, we will have a menu item that is responsible for our panel with settings. We fill in all the data. In our case, this is a logo and a phone.<\/p>\n
Next, we need to display in the subject, in the place we need, the fields that we have created. This is done simply:<\/p>\n
<?php echo get_field(\u2018logo\u2019, \u2018options\u2019) ?> –\u00a0will return us the url to the image<\/p>\n
<?php echo get_field(\u2018tel-1\u2019, \u2018options\u2019) ?> – will return us the text, in this case the phone number that we provided on the options page.<\/p>\n
\"\u0432\u044b\u0432\u043e\u0434<\/p>\n
Disable all WordPress updates<\/h3>\n
There are times when you need to protect the client from unnecessary actions in the administrative panel. If the client has full access to the admin panel and to all of its sections, there is a danger that a person not knowing the specifics of the CMS WordPress updates all plugins and the core itself. In this case, conflicts between new versions of plugins and the WP core itself may arise. To avoid such problems, you need to turn off updates. This is done quite simply – we add several filters to the functions.php file<\/p>\n
\/\/ WordPress updates\r\nadd_filter('pre_site_transient_update_core',create_function('$a', \"return null;\"));\r\nwp_clear_scheduled_hook('wp_version_check');\r\n\r\n\/\/ plugins updates\r\nremove_action( 'load-update-core.php', 'wp_update_plugins' );\r\nadd_filter( 'pre_site_transient_update_plugins', create_function( '$a', \"return null;\" ) );<\/pre>\n
\"\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/p>\n
How to register Custom post type<\/h3>\n
Above, we looked at how to display posts with a custom post type. We will now look at how to create a custom post type to display in the admin panel.<\/p>\n
The problem is this: in WordPress there are Posts and Pages – usually posts are used for News or Blogs. Pages – for static pages. Let’s say we need to create a custom post type – Products. To do this, go to the functions.php file and register our custom post<\/p>\n
\/\/ Register Custom Post Type\r\nfunction custom_post_type() {\r\n\r\n\t$labels = array(\r\n\t'name'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => _x( 'Post Types', '\u0422\u043e\u0432\u0430\u0440\u044b', 'text_domain' ),\r\n\t'singular_name'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => _x( 'Post Type', '\u0422\u043e\u0432\u0430\u0440', 'text_domain' ),\r\n\t'menu_name'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( '\u0422\u043e\u0432\u0430\u0440\u044b', 'text_domain' ),\r\n\t'name_admin_bar'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( '\u0422\u043e\u0432\u0430\u0440\u044b', 'text_domain' ),\r\n\t'archives'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Item Archives', 'text_domain' ),\r\n\t'attributes'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Item Attributes', 'text_domain' ),\r\n\t'parent_item_colon'\u00a0\u00a0\u00a0\u00a0 => __( 'Parent Item:', 'text_domain' ),\r\n\t'all_items'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'All Items', 'text_domain' ),\r\n\t'add_new_item'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Add New Item', 'text_domain' ),\r\n\t'add_new'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Add New', 'text_domain' ),\r\n\t'new_item'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'New Item', 'text_domain' ),\r\n\t'edit_item'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Edit Item', 'text_domain' ),\r\n\t'update_item'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Update Item', 'text_domain' ),\r\n\t'view_item'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'View Item', 'text_domain' ),\r\n\t'view_items'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'View Items', 'text_domain' ),\r\n\t'search_items'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Search Item', 'text_domain' ),\r\n\t'not_found'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Not found', 'text_domain' ),\r\n\t'not_found_in_trash'\u00a0\u00a0\u00a0 => __( 'Not found in Trash', 'text_domain' ),\r\n\t'featured_image'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Featured Image', 'text_domain' ),\r\n\t'set_featured_image'\u00a0\u00a0\u00a0 => __( 'Set featured image', 'text_domain' ),\r\n\t);\r\n\t$args = array(\r\n\t'label'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => __( 'Post Type', 'text_domain' ),\r\n\t'description'\u00a0\u00a0\u00a0\u00a0 => __( 'Post Type Description', 'text_domain' ),\r\n\t'labels'\u00a0\u00a0\u00a0\u00a0\u00a0 => $labels,\r\n\t'supports'\u00a0\u00a0\u00a0\u00a0 => false,\r\n\t'taxonomies'\u00a0\u00a0\u00a0\u00a0 => array( 'category', 'post_tag' ),\r\n\t'hierarchical'\u00a0\u00a0\u00a0 => false,\r\n\t'public'\u00a0\u00a0\u00a0\u00a0 => true,\r\n\t'show_ui'\u00a0\u00a0\u00a0 => true,\r\n\t'show_in_menu'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => true,\r\n\t'menu_position'\u00a0\u00a0 => 5,\r\n\t'show_in_admin_bar'\u00a0\u00a0\u00a0\u00a0 => true,\r\n\t'show_in_nav_menus'\u00a0\u00a0\u00a0\u00a0 => true,\r\n\t'can_export'\u00a0\u00a0 => true,\r\n\t'has_archive'\u00a0 => true,\r\n\t'exclude_from_search'\u00a0\u00a0 => false,\r\n\t'publicly_queryable'\u00a0\u00a0\u00a0 => true,\r\n\t'capability_type'\u00a0 => 'page',\r\n\t);\r\n\tregister_post_type( 'post_type', $args );\r\n\r\n}\r\nadd_action( 'init', 'custom_post_type', 0 );<\/pre>\n
Don’t be intimidated by the sheer number of options. Basically, these are translations and headings of menu items such as \u201cAdd Product\u201d, \u201cAll Products\u201d, etc.<\/p>\n
Description of each of the array parameters – you can find in the official WordPress documentation<\/p>\n
https:\/\/codex.wordpress.org\/Function_Reference\/register_post_type<\/a><\/p>\n
Take a close look at the array parameters $args. After registering a custom type, you will see a \u201cProducts\u201d section in your menu.<\/p>\n
We will be grateful for your comments and questions, it will inspire us to write new interesting articles!<\/p>","protected":false},"excerpt":{"rendered":"
Snippet is a short piece of code that performs a specific function and can be reused in development. Regarding CMS …<\/a><\/span><\/p>\n","protected":false},"author":4,"featured_media":1730,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-1713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/posts\/1713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/comments?post=1713"}],"version-history":[{"count":0,"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/posts\/1713\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/media\/1730"}],"wp:attachment":[{"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/media?parent=1713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/categories?post=1713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esfirum.com\/en\/wp-json\/wp\/v2\/tags?post=1713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}