{"id":245,"date":"2019-11-13T09:36:50","date_gmt":"2019-11-13T09:36:50","guid":{"rendered":"https:\/\/www.markupchimps.com\/blog\/?p=245"},"modified":"2019-11-13T10:52:50","modified_gmt":"2019-11-13T10:52:50","slug":"6-wordpress-theme-development-mistakes-you-need-to-stop-making","status":"publish","type":"post","link":"https:\/\/www.markupchimps.com\/blog\/6-wordpress-theme-development-mistakes-you-need-to-stop-making\/","title":{"rendered":"6 WordPress Theme Development Mistakes You Need To Stop Making"},"content":{"rendered":"<p>When asked to think about a content management system (CMS) that&#8217;s flexible as well as easy to use, what name comes to your mind? It&#8217;s WordPress, right? Well, with such a user-friendly interface and minimum requirement of technical expertise, WordPress is undoubtedly <a href=\"https:\/\/www.markupchimps.com\/blog\/what-makes-wordpress-the-ultimate-cms-for-your-website\/\" rel=\"noopener\" target=\"_blank\">one of the best CMSs out there right now<\/a>, especially for theme and plugin development. WordPress allows a ton of options for customizing and developing your own theme the way you want.<\/p>\n<p style=\"padding: 0;\"><!--more--><\/p>\n<p>As flexible as WordPress is, your theme development process could actually backfire if you do not go about it right. Even the most talented developers unknowingly commit simple mistakes while coding a new theme, which later, can have a huge impact on the overall functioning of your WordPress website. Code errors and bugs become more and more difficult to identify and fix as the site development cycle proceeds. So, it&#8217;s better to move in the right direction from the beginning to avoid fallbacks later.<\/p>\n<p>On that note, here&#8217;s how to get the most out of WordPress by avoiding a few mistakes that may creep in while programming or customizing a theme:<\/p>\n<h2>1. Unnecessary code fluff<\/h2>\n<p>Developing a theme code involves a lot of &#8220;what ifs&#8221; for developers. For example, consider the following code for displaying social icons on a WordPress page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/avoid-unnecessary-coding.jpg\" alt=\"avoiding unnecessary coding during WP theme development\" title=\"Avoid Unnecessary Coding - WP Theme Development\" width=\"698\" height=\"202\" class=\"alignnone size-full wp-image-290\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/avoid-unnecessary-coding.jpg 698w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/avoid-unnecessary-coding-300x87.jpg 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/p>\n<p>The function social_page_icon has simply been defined with icon as the variable. The other functions are being called inside this loop itself. Now, the developer runs into a &#8220;what if&#8221; situation and thinks &#8211; &#8221; What if I want to call the main function outside of the loop?&#8221;. As a result, the developer defines icons outside the social_page_icon loop, thus introducing an unnecessary fluff inside the code like this:<\/p>\n<p class=\"code-bg\">\nfunction social_page_icon($icon, $post_id = 0) {<br \/>\nif( ! $post_id )<br \/>\n{<br \/>\n$post_id = get_ID();<br \/>\n}<br \/>\n$icons = get_post_meta($post_id, &#8216;post_social_icons&#8217;, true);<br \/>\n\/\/ function body<br \/>\nreturn true;<br \/>\n}\n<\/p>\n<p>Chances are that the function will never be called outside the loop. But hypotheses like this one can make your code bulky and even harder to understand. As for the execution, unoptimized code can introduce unwanted bugs and performance issues. So, a word of advice here would be to stop assuming scenarios that might never take place.<\/p>\n<h2>2. Using absolute URLs for images and internal links<\/h2>\n<p>One of the most common WordPress theme development mistakes is using absolute URLs for images and internal linkings in HTML and PHP codes. While this approach isn&#8217;t actually wrong, it isn&#8217;t the best either, especially when you&#8217;re developing the theme code on a temporary domain. If you only use absolute URLs in the code, you&#8217;ll have to manually change all of them when it&#8217;s time to deploy the WordPress site on a permanent domain.<\/p>\n<p>Why deal with full URLs when WordPress has an alternative built-in options for fetching the correct image path?<\/p>\n<p><em>echo esc_url( home_url() )<\/em> is the answer. This code will give a direct path to the home page, which means that instead of placing the full URL, you can simply include a link back to your home page. For example, the following line of code will do the trick.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/using-absolute-URL.jpg\" alt=\"avoid using absolute URL during WP theme development\" title=\"WP Theme Development - Avoid Using Absolute URL\" width=\"698\" height=\"73\" class=\"alignnone size-full wp-image-288\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/using-absolute-URL.jpg 698w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/using-absolute-URL-300x31.jpg 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/p>\n<p>Deploying the same code over different domains or platforms won&#8217;t affect the image fetching process and thus, you won&#8217;t need to make any manual changes.<\/p>\n<h2>3. Too much of code optimization<\/h2>\n<p>Developers often optimize their PHP code, especially the parts with function definitions and calling. While the intent is fine, this optimization may do nothing but make your code lengthier and more scattered. For example, consider the following chunk of code.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/code-over-optimization.jpg\" alt=\"don\u2019t over-optimize your code\" title=\"Code Over-Optimization - Lengthy &#038; Scattered Code\" width=\"699\" height=\"395\" class=\"alignnone size-full wp-image-292\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/code-over-optimization.jpg 699w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/code-over-optimization-300x170.jpg 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n<p>Assigning values to the variable $post_id and $image might look like a great way of optimizing the code, but if you look further, these variables have only been used once or twice at max. This won&#8217;t save you any time.<\/p>\n<p>But this could:<\/p>\n<p class=\"code-bg\">\n&lt;div id=&#8221;post-&lt;?php ID() ?&gt;&#8221;<br \/>\n&lt;?php if( has_post_thumbnail() ): ?&gt;<br \/>\n&lt;div class=&#8221;thumbnail&#8221;&gt;<br \/>\n&lt;?php the_post_thumbnail(&#8216;medium&#8217;) ?&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;?php endif; ?&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>Less of a mess, isn\u2019t it? Sure, it calls two extra functions but that won\u2019t have any impact on the performance, just like the earlier one won\u2019t have any impact on time-saving. Code optimization is good and must be done, but only where it actually makes sense. And it takes an expert to understand this, which is why you\u2019ll be better off outsourcing <a href=\"https:\/\/www.markupchimps.com\/#services_sec\">WordPress theme customization services<\/a> to a company and let the professionals take charge.<\/p>\n<h2>4. Not using native WordPress functions<\/h4>\n<p>Do you know what \u2018not staying updated\u2019 with the latest WordPress functions does to you? Well, let\u2019s find out via the following example. Suppose you want to embed a simple code that allows you to navigate from one post to another. How would that go?<\/p>\n<p>Something like this will do:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/native-wp-functions-for-navigation.jpg\" alt=\"use native functions for code simplification\" title=\"Native WordPress Function for Navigation\" width=\"699\" height=\"235\" class=\"alignnone size-full wp-image-287\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/native-wp-functions-for-navigation.jpg 699w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/native-wp-functions-for-navigation-300x101.jpg 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n<p>This will work absolutely fine. But this long length of code could have been easily shortened if you knew about the native WordPress functions.<\/p>\n<p>Native WordPress functions allow anyone to tap into a theme by simply calling them without having to define one from scratch. In the aforementioned example:<\/p>\n<p><em>echo esc_attr( $next_post-&gt;post_title ) <\/em>fetches the title of the next post on the page. But instead of echoing this code, you can simply echo the native function <em>get_the_title() with next_post as the variable. So this becomes:<\/em><\/p>\n<p class=\"code-bg\">\n<em>&lt;echo get_the_title( $next_post )&gt;\u00a0<\/em>\n<\/p>\n<p>Alternatively, since we\u2019re only looking for a link to the next post, there\u2019s already a pre-defined native WordPress function <em>next_post_link(). <\/em>This means that you could simply replace all of the above code with:<\/p>\n<p><p class=\"code-bg\">\n&lt;?php next_post_link() ?&gt;\n<\/p>\n<p>Amazing, right? Well, all you need to do is stay updated with the latest native functions and you\u2019ll be able to save so much time and effort.<\/p>\n<h2>5. Installing jQuery or calling it remotely<\/h2>\n<p>Many WordPress developers who need access to jQuery elements try to install jQuery externally or call outside instances of jQuery. Yet another common WordPress theme development mistake. This is completely uncalled for since WordPress already has a JavaScript library with all the popular UI features that one might need. All you need to do is use your WordPress theme\u2019s <em>functions.php<\/em> file and enable the jQuery items that you want to use for your theme. Using them, you\u2019ll then be able to implement dialogs, tabs, etc. with ease, without having to make your code unnecessarily bulky. For example, if you want to implement a tab using jQuery elements, you just need to enable the jQuery UI tabs by adding the following piece of code in <em>functions.php file.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/how-to-use-jquery.jpg\" alt=\"WordPress theme development mistake while using jQuery\" title=\"jQuery - How to Use\" width=\"699\" height=\"202\" class=\"alignnone size-full wp-image-296\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/how-to-use-jquery.jpg 699w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/how-to-use-jquery-300x87.jpg 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n<p>This will load all the tab-related jQuery elements from the existing JS library so that you can proceed with designing your tabs the way you like.<\/p>\n<h2>6. Not including code comments<\/h2>\n<p>The PHP or JavaScript code for a WordPress website will obviously comprise a lot of different sections. Say, you have a final code file comprising codes for the homepage, blog, portfolio, and the contact us page. Your code should be readable enough so that each of these 4 sections can be identified separately. This way, making changes to your WordPress website will be a lot easier in the future, if required.<\/p>\n<p>For example,<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/code-comments-importance.jpg\" alt=\"importance of code comments\" title=\"Importance of Code Comments\" width=\"700\" height=\"980\" class=\"alignnone size-full wp-image-291\" srcset=\"https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/code-comments-importance.jpg 700w, https:\/\/www.markupchimps.com\/blog\/wp-content\/uploads\/2019\/11\/code-comments-importance-214x300.jpg 214w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: right;font-size: 14px;\"><em><strong>Source:<\/strong> GitHub<\/em><\/p>\n<p>\u2026\u2026..and so on.<\/p>\n<p>Failing to add comments will make it hard for you to even understand your own code, let alone make changes to it later on. Professionals who render WordPress theme customization services live by comment coding because it saves them a lot of time and effort.<\/p>\n<p>A few mistakes in the code could later cost you a significant amount of time and effort\u00a0 and bring down your WordPress site\u2019s performance. However, avoiding them will not only save you from such trouble but will also make it easier for you to manage your theme customization process.<\/p>\n<h2>How MarkupChimps Can Keep Coding Troubles At Bay<\/h2>\n<p>Been dealing with issues regarding WordPress theme customization? Well, MarkupChimps has just the right solution for you. Our expert PHP and JS developers know how to get the most out of WordPress by avoiding common coding mistakes. Opt for our WordPress theme customization services and see for yourself. Write to us at <a href=\"mailto:info@markupchimps.com\">info@markupchimps.com<\/a> and get started at the earliest.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When asked to think about a content management system (CMS) that&#8217;s flexible as well as easy to use, what name comes to your mind? It&#8217;s WordPress, right? Well, with such a user-friendly interface and minimum requirement of technical expertise, WordPress is undoubtedly one of the best CMSs out there right now, especially for theme and &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.markupchimps.com\/blog\/6-wordpress-theme-development-mistakes-you-need-to-stop-making\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;6 WordPress Theme Development Mistakes You Need To Stop Making&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":289,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[8,10,9],"class_list":["post-245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-how-to-get-the-most-out-of-wordpress","tag-wordpress-theme-customization-service","tag-wordpress-theme-development-mistakes"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":44,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/posts\/245\/revisions\/301"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/media\/289"}],"wp:attachment":[{"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markupchimps.com\/blog\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}