{"id":22306,"date":"2021-04-03T15:00:27","date_gmt":"2021-04-03T13:00:27","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=22306"},"modified":"2021-04-02T14:32:11","modified_gmt":"2021-04-02T12:32:11","slug":"wordpress-functions-php-tricks","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-functions-php-tricks\/","title":{"rendered":"11 Cool Things You Can Do With The WordPress Functions.php File"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The functions.php file is one of the most important files that a WordPress website has for webmasters. It allows them to directly change some of the website\u2019s features and functionalities instead of requiring them to use third-party plugins or custom-tailored themes. Even with its great potential, this file often goes under-appreciated by newer WordPress users.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is why we dedicated this article to explaining what the WordPress functions.php file is and to sharing some of the cool things you can do with it. To give you an idea of what those are, or to skip ahead to any one of them, you can check out the list below:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-dynamic-copyright-notice-in-the-footer\">Adding a dynamic copyright notice in the footer<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#updating-wordpress-urls\">Updating WordPress URLs<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#redirecting-users-after-login\">Redirecting users after login<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-new-admin-user\">Adding a new admin user<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-additional-image-sizes\">Adding additional image sizes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-custom-fonts\">Adding custom fonts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-google-analytics\">Adding Google Analytics<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#allowing-additional-upload-file-types\">Allowing additional upload file types<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#narrowing-the-search-scope\">Narrowing the search scope<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-custom-widget-areas\">Creating custom widget areas<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-custom-widgets\">Creating custom widgets<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">A Brief Explanation of the WordPress functions.PHP File<\/h2>\n<p>[\/vc_column_text][vc_column_text]The functions.php file is one of the core files of every WordPress theme, both parent and child. It allows theme developers and webmasters alike to define additional features or functionalities that a theme could have. Meaning, this file can serve as a repository of custom code snippets that improve your website. Any custom code snippets you choose to add should be inserted at the end of the file, which you can edit with an <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-ftp-clients-wordpress\/\">FTP client<\/a> and the <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-code-editors\/\">text editor of your choice<\/a>. However, there are two things you should keep in mind.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing is that the functions.php file is directly tied to the WordPress theme within which it\u2019s located. As such, any code snippets that you insert into the file will no longer work if you choose to deactivate its theme. Therefore, if you deactivate your current theme and choose to use another, you will need to copy\/paste any custom code snippets from your previous functions.php file to the new one.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The second thing is that, as one of the core files of WordPress themes, the functions.php file will get overwritten on every theme update. Therefore, if you insert a code snippet into the functions.php file of your parent theme, you risk losing it during the next theme update. To avoid that, webmasters usually opt to include their code snippets inside the functions.php file of <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-child-theme\/\">a child theme<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While a child theme will keep your modifications to the functions.php file safe from updates, it won\u2019t be much help if you choose to switch themes. The best way to cover both eventualities is to insert your custom code snippets inside a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a> instead of the functions.php file. That way, the snippets aren\u2019t tied to a theme, but to your plugin, and they will work as long as the plugin is active. With that being said, the choice is yours whether you\u2019ll use a site-specific plugin or add the snippets inside the functions.php of your child theme.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Some of the Things You Can Do with the WordPress functions.PHP File<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that you have a clearer picture of what the functions.php file serves, we\u2019ll be taking a look at how you can modify it with code snippets and create some additional features and functionalities for your site. We prepared 11 different code snippets that you can browse through and choose from.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before implementing any of the codes shown below, we strongly suggest you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">make a backup of your website<\/a>, as a safety precaution. Furthermore, as we mentioned earlier, any snippets you decide to add to your functions.php file should be inserted via FTP. If you aren\u2019t familiar with it, we recommend going through our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">the use of FTP<\/a>, as well. With that being said, let us proceed.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-a-dynamic-copyright-notice-in-the-footer\"><\/a>Adding a Dynamic Copyright Notice in the Footer<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Including a copyright notice in your site\u2019s footer will help you fight against copyright infringement. But, even though these notices can be easily made, they are rarely dynamic. This means you would need to regularly update them by hand. However, you can save yourself the trouble by creating dynamic copyright notices that are updated automatically. Below, you can see one example of a code snippet that will help you do this.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function custom_copyright_text( $atts, $content = null ) {\r\n$default_atts = array(\r\n\"year_from\" =&gt; ''\r\n);\r\n$params = shortcode_atts( $default_atts, $atts );\r\n$html = '&lt;div class=\"copyright\"&gt;Copyright &amp;copy; ';\r\nif ( ! empty( $params['year_from'] ) ) {\r\n$html .= $params['year_from'] . ' - ';\r\n}\r\n$html .= date( 'Y' ) . ' ';\r\nif ( ! empty( get_bloginfo( 'name' ) ) ) {\r\n$html .= '&lt;span class = \"site-title\"&gt;' . get_bloginfo( 'name' ) . '&lt;\/span&gt;' . ' ';\r\n}\r\nif ( ! empty( $content ) ) {\r\n$html .= '&lt;span class=\"content-after\"&gt;' . esc_html( $content ) . '&lt;\/span&gt;';\r\n}\r\n$html .= \"&lt;\/div&gt;\";\r\nreturn $html;\r\n}\r\nadd_shortcode( 'copyright_text', 'custom_copyright_text' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code represents a <strong>shortcode named copyright_text that enables the creation of a dynamic copyright notice. The shortcode output shows a <em>Copyright<\/em> label, followed by a copyright symbol. After that, the current year will be shown. Alternatively, you can opt to show a span of years, which will require you to insert the starting year<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Finally, the output will also show any text you choose to insert<\/strong>. However, to get that output, you need to know how to properly \u201ccall\u201d a shortcode in one of the footer widget areas. For a more detailed explanation on how to do that, as well as this shortcode and its use, you can browse our article on creating <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-copyright-footer-code\/\">dynamic copyright date<\/a> notices.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"updating-wordpress-urls\"><\/a>Updating WordPress URLs<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you have recently changed domains or switched from <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-ssl-wordpress\/\">HTTP to HTTPS<\/a>, updating your WordPress URLs is one of the most important steps you need to take. Additionally, updating your WordPress URLs is an important troubleshooting step when dealing with <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-login-redirect-loop\/\">login issues<\/a>. Luckily, there are several methods you can use to do this, including adding code to the functions.php file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To update your WordPress URLs via your functions.php file, you will need to add the following code to the end of the file.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">update_option( 'siteurl', 'https:\/\/your-website.com' );\r\nupdate_option( 'home', 'https:\/\/your-website.com' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code simply updates your WordPress and Site addresses with the values you insert. To clarify, the WordPress address represents the location of your WordPress core files, while the Site address represents the URL users type in to access your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, when using the code shown above, make sure to replace the <strong>your-website.com<\/strong> part with your actual website URL. Also, <strong>if your website URL contains www, make sure to include it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Please note, this code snippet is one of those that need to be used only once and then removed. Therefore, <strong>after adding the code in your functions.php file and checking the results, you should erase it<\/strong>. <strong>Otherwise, it could harm your website<\/strong>. For more on this subject, you can take a look at our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-change-wordpress-url\/\">changing WordPress URLs<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"redirecting-users-after-login\"><\/a>Redirecting Users after Login<\/h3>\n<p>[\/vc_column_text][vc_column_text]Redirecting users after they log in is quite a useful way of streamlining their experience, especially if they are new to your site. Some of the reasons why you might want to do this are redirecting customers to the shop page, subscribers to the announcement page, or listing agents to an alternative dashboard. All of these can be achieved using custom code. Below, you can find an example of how a redirection code could look.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function custom_login_redirect( $redirect_to, $request, $user ) {\r\nif ( isset( $user-&gt;roles ) &amp;&amp; is_array( $user-&gt;roles ) ) {\r\nif ( in_array( 'administrator', $user-&gt;roles ) || in_array( 'editor', $user-&gt;roles ) || in_array( 'author', $user-&gt;roles ) ) {\r\n$redirect_to = admin_url();\r\n} else if ( in_array( 'customer', $user-&gt;roles ) || in_array( 'shop_manager', $user-&gt;roles ) ) {\r\n$redirect_to = home_url( '\/shop' );\r\n} else {\r\n$redirect_to = home_url();\r\n}\r\n}\r\nreturn $redirect_to;\r\n}\r\nadd_filter( 'login_redirect', 'custom_login_redirect', 10, 3 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code sorts user roles into three categories and redirects them accordingly. <strong>Those with the admin, editor, and author user role are redirected to the default dashboard, customers and shop managers are redirected to the Shop page (the page URL is your-website-url\/shop), while all other users are redirected to the homepage<\/strong>. This is a very specific after login redirection that you can use or adapt to your website. For more on the subject, check out our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-redirect-after-login\/\">redirecting users after login<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;84px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-a-new-admin-user\"><\/a>Adding a New Admin User<\/h3>\n<p>[\/vc_column_text][vc_column_text]Every WordPress user, admin included, has lost access to the WordPress dashboard at least once. Most often, that happens because of a forgotten password. And, while it is relatively easy to <a href=\"https:\/\/qodeinteractive.com\/magazine\/recover-wordpress-password\/\">recover your password<\/a> using the recovery email, knowing alternative means how to do so can prove handy.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Instances where a different approach to password recovery might be needed include accidentally deleting your admin account, being hacked, or not being able to recover the password as the recovery email isn\u2019t yours. In these cases, simply adding a new admin user is the easiest way of getting back your access to the WordPress dashboard.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use your functions.php file and the code snippet below to create a new admin user for your site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_add_new_admin_account() {\r\n$user = 'insert-username-here';\r\n$password = 'insert-password-here';\r\n$email = 'insert-email-here';\r\nif ( ! username_exists( $user ) &amp;&amp; ! email_exists( $email ) ) {\r\n$user_id = wp_create_user( $user, $password, $email );\r\n$user = new WP_User( $user_id );\r\n$user-&gt;set_role( 'administrator' );\r\n}\r\n}\r\nadd_action( 'init', 'qode_add_new_admin_account' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]The code is quite straightforward\u2014it creates a new user with administrator privileges, which will have the username, password, and email you insert attached to it. Needless to say, you should replace the dummy data (<strong>insert-username-here, insert-password-here, and insert-email-here<\/strong>) with actual user information. <strong>The only condition that the code has is that the username and email you insert can\u2019t belong to any of the existing users on your website<\/strong>. Make sure to keep that in mind when adding the appropriate information to the code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>After inserting the code into your functions.php file, navigate to your login page and try to log in. When you\u2019ve logged in, make sure to remove the code you added from your functions.php file, as it only needs to be used once<\/strong>. To learn more about creating admin users, as well as see an alternative way to do it, you can go through our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/phpmyadmin-add-user\/\">adding users via phpMyAdmin<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-additional-image-sizes\"><\/a>Adding Additional Image Sizes<\/h3>\n<p>[\/vc_column_text][vc_column_text]Every time you upload an image to your Media Library, WordPress generates several default variations of that image. On top of that, WordPress allows you to add custom image sizes that work better with the orientation and dimensions of the images you upload. While this functionality should be used sparingly, as too many custom image sizes can slow down your website, it\u2019s still very useful to have.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By inserting code into your functions.php file, you can add more custom image sizes in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function register_custom_image_sizes() {\r\nif ( ! current_theme_supports( 'post-thumbnails' ) ) {\r\nadd_theme_support( 'post-thumbnails' );\r\n}\r\nadd_image_size( 'custom-small-square', 450, 450, true );\r\nadd_image_size( 'custom-landscape', 1000, 600 );\r\n}\r\nadd_action( 'after_setup_theme', 'register_custom_image_sizes' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code can be divided into two parts\u2014adding support for post thumbnails and registering two new custom image sizes using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_image_size\/\" target=\"_blank\" rel=\"noopener\">add_image_size()<\/a> function. <strong>The first part is a prerequisite, and we included it in case that your current theme hasn\u2019t. In the second part, we have added two custom image sizes with the IDs titled custom-small-square and custom-landscape, respectively. The attributes we used for the former entail image dimensions of 450&#215;450 pixels, and that the resulting image will represent a centrally cropped version of the original. As for the latter, the attributes we used mean that the original image will be scaled down until it fits at least one of the given dimensions<\/strong> (1000px for the width or 600px for the height).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>When using this code, make sure to adapt it to your needs by changing all the parameters of the add_image_size() function accordingly<\/strong>. As this is a broad subject, we suggest reviewing our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-image-size\/\">adding custom image sizes<\/a> for a more in-depth guide.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-custom-fonts\"><\/a>Adding Custom Fonts<\/h3>\n<p>[\/vc_column_text][vc_column_text]You might find yourself in a situation where you need a specific or custom font, but your current theme doesn\u2019t have it. The right custom font or custom font combination can significantly improve the look of your website and its user experience. This is why a lot of webmasters opt to use a font that plays into their brand.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, finding the right font to use is only half the problem. After choosing your custom font, you still need to properly add it to your website. While some users prefer plugins that solve this issue, there\u2019s a way to include custom fonts using code and your functions.php file. We will show you how to properly enqueue custom font stylesheets on your website, so you can use your chosen font. You can find an example of the code below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_add_custom_fonts() {\r\nwp_enqueue_style( 'qode-add-custom-font', 'custom-font-link', false );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'qode_add_custom_fonts' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code represents a function we created called qode_add_custom_fonts(). It\u2019s hooked onto the wp_enqueue_scripts hook, which is used for enqueueing scripts and styles that appear on the website\u2019s frontend.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The content of the function is a single line of code that enqueues the font stylesheet using the<\/strong> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a> function. In our example, we used the following parameters: <em>qode-add-custom-font<\/em> as the handle, <em>custom-font-link<\/em> as the URL of the font\u2019s stylesheet, and false as the dependency (meaning the font stylesheet won\u2019t require other stylesheets to be loaded first). Since we haven\u2019t used them, all the remaining parameters take on their default values\u2014<strong>the stylesheet version is the same as the currently installed WordPress version, and the stylesheet code is intended for all media types<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In most cases, <strong>you will only need to edit the code structure slightly<\/strong>. That includes <strong>making sure that any handle you use is unique<\/strong>. Also, <strong>you will need to replace the <em>custom-font-link<\/em> with a valid stylesheet URL<\/strong>. If your custom font is contained within a separate file, you will need to upload it via FTP to your current theme directory and replace the <em>custom-font-link<\/em> part with the URL of the uploaded file. However, if you are using Google fonts you only need to replace the <em>custom-font-link<\/em> part. We\u2019ll explain how to locate a Google font URL below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To locate the stylesheet URL of your chosen Google font, find the font on <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a> first. Then, after selecting all the styles you need, examine the<em> Use on the web<\/em> section in the options on the right. The appropriate URL is the value of the href attribute of the link tag, as shown in the screenshot below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Adding-Custom-Google-Fonts.jpg\" class=\"attachment-full size-full\" alt=\"Adding custom fonts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Adding-Custom-Google-Fonts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Adding-Custom-Google-Fonts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Adding-Custom-Google-Fonts-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Adding-Custom-Google-Fonts-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In our example, the custom-font-link part should be replaced with<code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\"> https:\/\/fonts.googleapis.com\/css2?family=Dancing+Script:wght@500;600&amp;display=swap<\/code> to properly enqueue the font stylesheet.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Afterward, <strong>you should use CSS code to apply the new font to different elements of your website<\/strong>. Here\u2019s how that CSS code could look for the font that we used in our example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">h1 {\r\nfont-family: 'Dancing Script', cursive;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]<strong>You can place the CSS you create into the Appearance &gt; Customize &gt; Additional CSS.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While this concludes the section on adding custom fonts via the functions.php file, enqueueing is an advanced WordPress subject. Therefore, we invite you to read through our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enque-scripts-wordpress\/\">enqueueing scripts and stylesheets<\/a> for a more detailed explanation and examples of use. Also, you can find some suggestions on choosing the right font, as well as instructions on alternative ways to add fonts, in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-custom-wordpress-fonts\/\">adding custom WordPress fonts<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-google-analytics\"><\/a>Adding Google Analytics<\/h3>\n<p>[\/vc_column_text][vc_column_text]Web analytics provide the essential insights for building marketing strategies or improving your website as a whole. The code used for web analytics gathers data across a multitude of metrics and helps you understand the demographics of your site visitors better. The most common web analytics service nowadays is <a href=\"https:\/\/qodeinteractive.com\/magazine\/getting-started-with-google-analytics\/\">Google Analytics<\/a>, which can be added to your website using several methods.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll show how to add Google Analytics to your site by inserting a short code snippet to your functions.php file.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_add_google_analytics() { ?&gt;\r\n\/\/ Paste your Google Analytics tracking code here\r\n&lt;?php }\r\nadd_action( 'wp_head', 'qode_add_google_analytics' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]The code represents a custom function called qode_add_google_analytics() that is hooked onto the wp_head action hook. <strong>This code is very simple and requires only one modification\u2014replacing the dummy information with your own<\/strong>. Specifically, you need to set your Google Analytics code in place of the line containing \/\/ Paste your Google Analytics tracking code here.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As the wp_head() function is located within theelement, it means this code will be executed as if it was placed directly between the openingand closingtag, the place where the Google Analytics code should be added. Using this method (hooking the code onto the appropriate hook) to add Google Analytics code is the recommended approach; it\u2019s preferable to manually editing the header.php template file.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"allowing-additional-upload-file-types\"><\/a>Allowing Additional Upload File Types<\/h3>\n<p>[\/vc_column_text][vc_column_text]For security reasons, WordPress allows only a limited number of file types to be uploaded directly via the dashboard. And depending on your server configuration, these restrictions could be even stricter. If you try to upload a file type that is not permitted to your website, you will see an error message similar to the one shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Allowing-additional-upload-file-types.jpg\" class=\"attachment-full size-full\" alt=\"Allowing additional upload file types\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Allowing-additional-upload-file-types.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Allowing-additional-upload-file-types-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Allowing-additional-upload-file-types-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Allowing-additional-upload-file-types-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One way of avoiding this is by adding a snippet of code to your functions.php file, which will expand the list of file types allowed for upload. You can see an example of a code snippet that would do this below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function additional_upload_file_types($mime_types){\r\n$mime_types['svg'] = 'image\/svg+xml';\r\n$mime_types['psd'] = 'image\/vnd.adobe.photoshop';\r\nreturn $mime_types;\r\n}\r\nadd_filter('upload_mimes', 'additional_upload_file_types', 1, 1);<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]<strong>This code allows you to upload .svg and .psd files within the WordPress admin dashboard. You can create similar lines of code to allow other non-permitted file types.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Bear in mind that the file upload process could also be restricted by your hosting provider. If that\u2019s the case, you will need to contact them and request to be allowed to upload certain file types.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There\u2019s also the option of allowing unfiltered uploads, which you should keep as a last resort. This is done by adding[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">define( 'ALLOW_UNFILTERED_UPLOADS', true );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]in your wp-config.php file, above the \/* That&#8217;s all, stop editing! Happy blogging. *\/ comment line.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This line of code allows administrators to upload any file type, but it poses a huge security risk. If you decide to use it, we recommend you do so briefly and that you remove the line of code as soon as you upload the files.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"narrowing-the-search-scope\"><\/a>Narrowing the Search Scope<\/h3>\n<p>[\/vc_column_text][vc_column_text]If your website is separated into several sections (for example, blog and shop), it\u2019s a good idea to have separate search results for each. To help your visitors find what they\u2019re looking for and to narrow the search scope, you can exclude certain post types as potential search results. This can be achieved quite easily by adding an appropriate code snippet inside your WordPress functions.php file. You can find an example below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_set_search_scope( $query ) {\r\nif ( $query-&gt;is_search ) {\r\n$query-&gt;set( 'post_type', array( 'post', 'page' ) );\r\n}\r\nreturn $query;\r\n}\r\nadd_filter( 'pre_get_posts', 'qode_set_search_scope' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]<strong>By using this code, you will ensure that only pages and posts appear in the search results. Knowing that, you can edit the code snippet above according to your needs. For example, you can change the allowed post types or add new ones that are registered on your website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"creating-custom-widget-areas\"><\/a>Creating Custom Widget Areas<\/h3>\n<p>[\/vc_column_text][vc_column_text]One of the many advantages of WordPress is the potential to customize almost any aspect of your website. This can be done through both custom code and the use of plugins. In this section, we will talk about customizing your site by creating custom widget areas, which are often needed to achieve a certain page look.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The process of creating a custom widget area can be broken down into two parts\u2014registering the widget area and adding the code that displays it inside the appropriate template file<\/strong>. We will include examples for both and explain them below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function register_custom_widget_area() {\r\nregister_sidebar(\r\narray(\r\n'id' =&gt; 'new-widget-area',\r\n'name' =&gt; esc_html__( 'My new widget area', 'theme-domain' ),\r\n'description' =&gt; esc_html__( 'A new widget area made for testing purposes', 'theme-domain' ),\r\n'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget %2$s\"&gt;',\r\n'after_widget' =&gt; '&lt;\/div&gt;',\r\n'before_title' =&gt; '&lt;div class=\"widget-title-holder\"&gt;&lt;h3 class=\"widget-title\"&gt;',\r\n'after_title' =&gt; '&lt;\/h3&gt;&lt;\/div&gt;'\r\n)\r\n);\r\n}\r\nadd_action( 'widgets_init', 'register_custom_widget_area' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code registers a custom widget area titled <strong>My new widget area<\/strong> with the description <strong>A new widget area made for testing purposes<\/strong> shown underneath. The unique ID of this widget area is the <strong>new-widget-area<\/strong>, and it will later be used to reference it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the remaining parameters, <strong>the before_widget and after_widget parameters represent the HTML structure that will wrap the content of any widget inserted inside the widget area<\/strong>. And <strong>the before_title and after_title represent the HTML structure that wraps the widget area title<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The widget area is registered using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_sidebar\/\" target=\"_blank\" rel=\"noopener\">register_sidebar()<\/a> function, using the parameters mentioned above. Apart from them, this function accepts additional parameters which we didn\u2019t use, but you can see them on the function\u2019s documentation page. Once you know all the parameters this function accepts, <strong>you can register your custom widget area by editing the code we provided accordingly<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>After registering the custom widget area, you will need to add the code that displays it in a proper place on your website<\/strong>. An example of that code is given below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?&gt;\r\n&lt;div id=\"secondary-sidebar\" class=\"new-widget-area\"&gt;\r\n&lt;?php dynamic_sidebar( 'new-widget-area' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php endif; ?&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]The code is rather simple\u2014it uses the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_active_sidebar\/\" target=\"_blank\" rel=\"noopener\">is_active_sidebar()<\/a> function to check whether you added any widgets to the area with the ID new-widget-area. If you added content inside the new-widget-area, it will display it using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/dynamic_sidebar\/\" target=\"_blank\" rel=\"noopener\">dynamic_sidebar()<\/a> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use the piece of code intended for displaying your custom widget area, you will need to add it to an appropriate template file. The most frequently used are header.php, footer.php, or sidebar.php. As we covered this code in great detail in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-widget-area-to-wordpress\/\">adding custom widget areas<\/a>, we suggest reviewing it for more information.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For an added layer of customization, you can include your custom widget areas within custom page templates. To learn more about that, you can read our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-custom-page-template\/\">creating custom page templates<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"creating-custom-widgets\"><\/a>Creating Custom Widgets<\/h3>\n<p>[\/vc_column_text][vc_column_text]To accompany the creation of custom widget areas, we have decided to cover how to create custom widgets as the last item on this list. As widgets, depending on their purpose, can vary in complexity quite a lot, we will show you how the structure of a basic widget should look like. Generally, it should look like the structure below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">class My_Widget extends WP_Widget {\r\nfunction __construct() {\r\n\/\/ Some code here\r\n}\r\npublic function widget( $args, $instance ) {\r\n\/\/ Some code here\r\n}\r\npublic function form( $instance ) {\r\n\/\/ Some code here\r\n}\r\npublic function update( $new_instance, $old_instance ) {\r\n\/\/ Some code here\r\n}\r\n}\r\nfunction name_of_the_register_function() {\r\nregister_widget( 'My_Widget' );\r\n}\r\nadd_action( 'widgets_init', 'name_of_the_register_function' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]This code represents the custom widget called My_Widget, which is registered using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_widget\/\" target=\"_blank\" rel=\"noopener\">register_widget()<\/a> function. The My_Widget is a class object that extends the WP_Widget class given by <a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noopener\">the Widget API<\/a>. Our My_Widget class has four methods: __construct(), widget(), form() and update(). <strong>The __construct() method creates the widget, the widget() method displays the output of the widget, the form() displays the widget options in the backend, and the update() method is responsible for properly updating the options selected within the widget<\/strong>. As this is a very advanced topic, we suggest reading more about it in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-custom-widget\/\">creating custom WordPress widgets<\/a> to get detailed information.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]The WordPress functions.php file can be a versatile tool for a creative webmaster. We shared a selection of neat tricks you can accomplish with this file, but this list is by no means exhaustive. We urge you to explore and try some of these things out on your own. There\u2019s a range of things you can do. You can use small code snippets to troubleshoot certain WordPress errors like adding a new admin user or updating WordPress URLs. You can also improve existing functionalities\u2014add new upload file types or image sizes, implement new features such as redirects after login. Or create custom widget areas, widgets, or shortcodes of various kinds.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]WordPress\u2019s functions.php file allows users to modify or create a number of features and functionalities. By now, we hope you have become convinced of the usefulness of this file and the flexibility it provides. As there is only so much we can cover in a single article, we invite you to take a peek at some of our other <a href=\"https:\/\/qodeinteractive.com\/magazine\/category\/tutorials\/\">tutorials<\/a> for more helpful code snippets and tricks.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The WordPress functions.php offers a lot of customization options if you know what you&#8217;re doing. In this article, we&#8217;ll be exploring some of them.<\/p>\n","protected":false},"author":11229,"featured_media":22327,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[14,21,4,13],"class_list":["post-22306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-core","tag-php","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=22306"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22306\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/22327"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=22306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=22306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=22306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}