{"id":8312,"date":"2023-04-26T08:13:41","date_gmt":"2023-04-26T08:13:41","guid":{"rendered":"https:\/\/positiwise.com\/?p=8312"},"modified":"2023-08-31T08:23:26","modified_gmt":"2023-08-31T08:23:26","slug":"how-to-create-wordpress-theme-mobile-responsive","status":"publish","type":"post","link":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive","title":{"rendered":"How To Create WordPress Theme Mobile Responsive?"},"content":{"rendered":"\n<p><strong class=\"pw-highlight-text-color\"><em>Quick Overview:<\/em><\/strong><br>A WordPress theme is a pre-built site layout that you can edit according to the requirements. Adding your content, integrating relevant plugins, and hosting it requires minimal effort. However, sometimes, such themes don\u2019t provide overall control to you. Due to this, your website starts lacking, and it needs to align with the business goal and message.<br><br>However, with a custom WordPress theme development, you can curate an appealing theme for your business solution. It would allow modification of any function, plugin, component, website looks, navigation, and more. But, to develop a top-notch theme, the correct procedure is required, which you will know here. So, let\u2019s get started.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#What_is_Gutenberg_in_WordPress\" >What is Gutenberg in WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#The_Pros_and_Cons_of_WordPress_Block_Editor_Gutenberg\" >The Pros and Cons of WordPress Block Editor (Gutenberg)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Pros_of_Gutenberg_Editor\" >Pros of Gutenberg Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Cons_of_Gutenberg_Editor\" >Cons of Gutenberg Editor<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#The_Difference_Between_WordPress_Gutenberg_Editor_and_Traditional_Editor\" >The Difference Between WordPress Gutenberg Editor and Traditional Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#How_To_Get_Started_With_The_Gutenberg_Editor\" >How To Get Started With The Gutenberg Editor<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_1_Adding_a_List\" >Example 1: Adding a List<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_2_Uploading_an_Image_to_the_Webpage\" >Example 2: Uploading an Image to the Webpage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_3_To_Embed_a_YouTube_Video_Block_on_the_Webpage\" >Example 3: To Embed a YouTube Video Block on the Webpage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Example_4_Arranging_the_Blocks\" >Example 4: Arranging the Blocks<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#WordPress_Blog_Editor_Gutenberg_vs_The_Legacy_Widgets\" >WordPress Blog Editor (Gutenberg) vs. The Legacy Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\/#Concluding_Up\" >Concluding Up<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\">Why Should You Consider Custom WordPress Theme Development?<\/h2>\n\n\n\n<p>When you open the WordPress website development portal, you will find numerous pre-build theme templates. You can select any of them, add content, integrate a plugin, and launch your site or business online.<\/p>\n\n\n\n<p>However, such theme templates sometimes restrict changing a component\u2019s location, background, widgets, and all other features. Due to it, you must find another available theme or settle for it. And both methods are not viable for your business. One can waste your time and efforts in finding and configuring the theme, and the other can downgrade the business metrics.<\/p>\n\n\n\n<p>However, there\u2019s a reliable mechanism through which you can get a theme per your requirements. And that method is Custom WordPress Theme Development. If you are facing the mentioned problems, you must avail of&nbsp;<a href=\"https:\/\/positiwise.com\/technologies\/wordpress-development\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WordPress Theme Development Services<\/strong><\/a>.<\/p>\n\n\n\n<p>In addition, with custom theme development, you can create a responsive design containing all the necessary plugins. And with the functionality designed according to the comfort of your end-users.<\/p>\n\n\n\n<p class=\"rounded py-3 px-4 has-base-color has-text-color has-background\" style=\"background-color:#151e2c\"><em>Recommended Read: <\/em><a href=\"https:\/\/positiwise.com\/blog\/wordpress-com-vs-wordpress-org\">WordPress.com vs WordPress.org: Which One is better?<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Need Of WordPress Mobile Optimization<\/h2>\n\n\n\n<p>While developing a custom theme, many developers need to optimize it for mobile devices, such as smartphones and tablets. As only some users access the website on a desktop, developing a mobile responsive WordPress theme is essential. It aids in various factors, such as:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It supports reaching out to every user, irrespective of the device.&nbsp;<\/li>\n\n\n\n<li>It helps to increase user traffic retention and conversion rate, as most people use mobile phones to access the sites.&nbsp;<\/li>\n\n\n\n<li>The quality of the website is retained on every device.&nbsp;<\/li>\n\n\n\n<li>The ranking of websites increases as Google prefers mobile-friendly websites as compared to sites native to desktops.<\/li>\n\n\n\n<li>It helps to save time, cost, and effort, as you only need to invest in one WordPress website that can run across all types of devices.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">A Descriptive Answer To \u201cHow To Make WordPress Site Responsive\u201d?<\/h2>\n\n\n\n<p>Download and install WordPress on the local machine to start with the WordPress theme development. It will help you efficiently build, store, and configure the mobile responsive theme. In the further steps, HTML and CSS will be used. So, you must learn their fundamentals to understand the procedure reliably.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Generating and Save the Template Files<\/h3>\n\n\n\n<p>According to the WordPress documentation, the theme files contain two primary directories, known as&nbsp;<strong>index.php<\/strong>&nbsp;and&nbsp;<strong>style.css<\/strong>. And under the mentioned directories, further associated files get stored, which include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>header.php&nbsp;<\/li>\n\n\n\n<li>footer.php<\/li>\n\n\n\n<li>functions.php<\/li>\n\n\n\n<li>sidebar.php<\/li>\n\n\n\n<li>single.php<\/li>\n\n\n\n<li>page.php<\/li>\n<\/ul>\n\n\n\n<p>You have to create and store all these files on the WordPress platform to utilize your theme and use it for creating a responsive website. All the mentioned files will contain the code for different page sections. For instance, the header.php file will have the HTML code for the top section of the page. Footer.php will store the code for the bottom of the webpage. Similarly, functions.php will cover color combinations, scripts, menu designs, and complete functionality code.&nbsp;<\/p>\n\n\n\n<p>Further, sidebar.php, single.php, and page.php will aid in creating the sidebar components and display a specific post of a particular webpage and overall page content simultaneously.&nbsp;<\/p>\n\n\n\n<p>All the mentioned files are necessary for WordPress theme development, and you must create them all. However, when you do custom theme development, WordPress allows you to edit all the files as per requirements.&nbsp;<\/p>\n\n\n\n<p>Now comes the practical part of saving the file at an appropriate location. You must access the WordPress administrative panel (cPanel or hPanel) to do so. Once it gets opened, navigate to the wp-content, then to themes, and create a new folder under it. Further, create and save all the mentioned PHP template files under it.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configuration of associated CSS Stylesheet (style.css file)<\/h3>\n\n\n\n<p>An appealing and adaptive design is an essential component of a responsive website. And to achieve such an objective, CSS Stylesheet will help you. In this CSS file (style.css), you must define the color contrast, fonts, and other webpage elements.&nbsp;<\/p>\n\n\n\n<p>But, before you start writing the CSS code, WordPress requires the developers to add some crucial details in the form of comments at the top. You must add the theme name, author name, author URI, theme description, version number, license, and license URI. While defining the details, use only WordPress-defined keywords. For better clarification, you can reference the below snippet.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\/*\nTheme Name: My Theme\nAuthor: Hostinger\nAuthor URI: http:\/\/www.hostinger.com\/tutorials\nDescription: My first responsive HTML5 theme\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/pre><\/div>\n\n\n\n<p>Furthermore, after adding the CSS stylesheet, WordPress will show the custom theme with its name. But, at this stage, you will only see a blank website\/webpage, as the index.php is still empty.<\/p>\n\n\n\n<p>Now, you must verify that the CSS file is getting detected. To do so, open the file and add a basic CSS code, such as counting the background image of color to the webpage. However, remember to leave a line after the theme information you mentioned in the comments.<br>Besides, you can return to the style.css file anytime to add and update visual designs to each component. As a result, your&nbsp;<a href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WordPress website<\/strong><\/a>&nbsp;will get optimized across all devices and platforms.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Enabling Functionality of WordPress Mobile-Friendly Theme<\/h3>\n\n\n\n<p>After defining the design and visual appearance of the WordPress theme, it\u2019s time to configure its functionality. It will support making the theme adaptable to different device screen sizes, assuring all end-users a seamless experience.<\/p>\n\n\n\n<p>For instance, if your user accesses the site on a mobile device, the theme components will be displayed at their respective place. The color contrast, fonts, and image quality will be retained.<br>Further, we will use the functions.php and sidebar.php template files to add functionality to the theme.<\/p>\n\n\n\n<p>Inside the functions.php file, your primary aim would be normalizing the CSS components. It will help you display the website as it is across all devices, including desktops, mobile phones, tablets, and more. To do so, add a file with the name normalize.css under the functions.php and define a function to access the normalize.css file whenever the site gets access.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">&lt;?php\n\/\/ This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we\n\/\/ use an online version of the css file.\nfunction add_normalize_CSS() {\n   wp_enqueue_style( 'normalize-styles', &quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css&quot;);\n}\nadd_action('wp_enqueue_scripts', 'add_normalize_CSS');<\/pre><\/div>\n\n\n\n<p>Following it, add the sidebar widgets code in the same file. Then, define the custom navigation to it and enable the Menu feature under the Appearance.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\/\/ Register a new sidebar simply named 'sidebar'\nfunction add_widget_support() {\n               register_sidebar( array(\n                               'name'          =&gt; 'Sidebar',\n                               'id'            =&gt; 'sidebar',\n                               'before_widget' =&gt; '&lt;div&gt;',\n                               'after_widget'  =&gt; '&lt;\/div&gt;',\n                               'before_title'  =&gt; '&lt;h2&gt;',\n                               'after_title'   =&gt; '&lt;\/h2&gt;',\n               ) );\n}\n\/\/ Hook the widget initiation and run our function\nadd_action( 'widgets_init', 'add_widget_support' );<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\/\/ Register a new navigation menu\nfunction add_Main_Nav() {\n  register_nav_menu('header-menu',__( 'Header Menu' ));\n}\n\/\/ Hook to the init action hook, run our navigation menu function\nadd_action( 'init', 'add_Main_Nav' );<\/pre><\/div>\n\n\n\n<p>Furthermore, you must add the code in the sidebar.php file to allow the widgets to display in the browsers.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">&lt;?php if ( is_active_sidebar( 'sidebar' ) ) : ?&gt;\n  &lt;aside id=&quot;primary-sidebar&quot; class=&quot;primary-sidebar widget-area&quot; role=&quot;complementary&quot;&gt;\n    &lt;?php dynamic_sidebar( 'sidebar' ); ?&gt;\n  &lt;\/aside&gt;\n&lt;?php endif; ?&gt;<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Develop the Custom Theme Layout<\/h3>\n\n\n\n<p>Now, it\u2019s time to customize the overall layout of the webpage by adding the code to all the files mentioned in Step 1. You will edit the header.php, single.php, page.php, index.php, and footer.php files here.<\/p>\n\n\n\n<p>Firstly, in the header.php file, define the document type, similar to any HTML code. Then, determine the header elements, add metadata, and link tags. In addition, use the wp_head() hook, body_class function, and wp_nav_menu() within the code.<\/p>\n\n\n\n<p>Further, edit the index.php file. It will be used as the homepage, so utilize the correct tags. Ensure to add the header, footer, and sidebar tags along with &lt;section&gt;, &lt;article&gt;, &lt;header&gt;, and &lt;main&gt; tags.<\/p>\n\n\n\n<p>Following it comes the footer.php file, defining the bottom of the WordPress website. For this, you can use the semantic HTML5 element &lt;footer&gt;&lt;\/footer&gt;. In addition, now configure the single.php file using the the_content() function. It will help you display a particular post on the screen.<\/p>\n\n\n\n<p>Lastly, add the code to the page.php file to configure the display of responsive web pages across different screens and devices. Moreover, add the sidebar code again to this file to allow content to get displayed across 70% of the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Enhancing the CSS Stylesheet Design<\/h3>\n\n\n\n<p>Lastly, after adding the code to each template file, customize the style.css file accordingly. In this file, you can add boundaries, background images, effects, and more for each component. Now, your theme is ready to use.&nbsp;<\/p>\n\n\n\n<p>Furthermore, now you know which template or style needs to be accessed if you want to change any of the components.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-group bg-shaps border rounded has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-a666d811 wp-block-group-is-layout-constrained\" style=\"border-radius:5px;background-color:#f8f9fa;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-group row g-lg-5 g-3 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group col-lg-8 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left fs-2 text-blue lh-sm has-contrast-color has-text-color\"><strong>Get a Custom WordPress Site Built by the Best WordPress Developers<\/strong><\/p>\n\n\n\n<p>Our expert WordPress developers are ready to build your custom WordPress site. 10+ years\u2019 experience. Satisfaction guaranteed. Free consultation!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-fc4fd283 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-base-color has-text-color has-background wp-element-button\" href=\"https:\/\/positiwise.com\/technologies\/wordpress-development\" style=\"border-radius:100px;background-color:#ed7923;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px\"><strong>Hire Dedicated WordPress Developers<\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full col-lg-4\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"348\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/SeekPng.com_female-hand-png_4128668.png\" alt=\"Hire Dedicated WordPress Developers\" class=\"wp-image-11254\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/SeekPng.com_female-hand-png_4128668.png 367w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/SeekPng.com_female-hand-png_4128668-300x284.png 300w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>For developing mobile responsive WordPress themes, it\u2019s essential to understand the requirements and then move further with the process. The procedure includes five steps: PHP template files are created using the cPanel or hPanel. Then, you have to add and link the code to each. Further, the CSS file gets configured for each of the components. And as a result, you get a mobile-friendly WordPress theme.&nbsp;<\/p>\n\n\n\n<p>Further, due to such a responsive theme, your website opens on every screen and showcases all the content in the utmost quality. Also, the search engine ranks it in the top list. However, you must avail yourself of custom WordPress theme development services from an authentic company, such as Positiwise Software Pvt Ltd.&nbsp;<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Steps to Customize Your WordPress Website\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n        7  Steps to Customize Your WordPress Website  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How To Create WordPress Theme Mobile Responsive?\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n        How To Create WordPress Theme Mobile Responsive?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"An Introduction To Gutenberg Editor Development in WordPress\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"An Introduction To Gutenberg Editor Development in WordPress\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/an-introduction-to-gutenberg-editor-development-in-wordpress-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"An Introduction To Gutenberg Editor Development in WordPress\" href=\"https:\/\/positiwise.com\/blog\/an-introduction-to-gutenberg-editor-development-in-wordpress\">\r\n        An Introduction To Gutenberg Editor Development in WordPress  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Quick Overview:A WordPress theme is a pre-built site layout that you can edit according to the requirements. Adding [&hellip;]<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Steps to Customize Your WordPress Website\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/10\/steps-to-customize-your-wordpress-website-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"7  Steps to Customize Your WordPress Website\" href=\"https:\/\/positiwise.com\/blog\/7-steps-to-customize-your-wordpress-website\">\r\n        7  Steps to Customize Your WordPress Website  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How To Create WordPress Theme Mobile Responsive?\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How To Create WordPress Theme Mobile Responsive?\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\">\r\n        How To Create WordPress Theme Mobile Responsive?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How to Migrate Your WordPress Website: A Comprehensive Guide\" href=\"https:\/\/positiwise.com\/blog\/how-to-migrate-your-wordpress-website-a-comprehensive-guide\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How to Migrate Your WordPress Website: A Comprehensive Guide\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-to-migrate-your-wordpress-website-a-comprehensive-guide-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How to Migrate Your WordPress Website: A Comprehensive Guide\" href=\"https:\/\/positiwise.com\/blog\/how-to-migrate-your-wordpress-website-a-comprehensive-guide\">\r\n        How to Migrate Your WordPress Website: A Comprehensive Guide  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"author":4,"featured_media":9787,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[706],"tags":[],"class_list":["post-8312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Create WordPress Theme Mobile Responsive<\/title>\n<meta name=\"description\" content=\"Are you looking to develop custom WordPress themes that are mobile responsive? Read further to learn more!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create WordPress Theme Mobile Responsive?\" \/>\n<meta property=\"og:description\" content=\"Are you looking to develop custom WordPress themes that are mobile responsive? Read further to learn more!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive\" \/>\n<meta property=\"og:site_name\" content=\"Positiwise\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/positiwise\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-26T08:13:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T08:23:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1021\" \/>\n\t<meta property=\"og:image:height\" content=\"621\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jemin Desai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@positiwise\" \/>\n<meta name=\"twitter:site\" content=\"@positiwise\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jemin Desai\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive\"},\"author\":{\"name\":\"Jemin Desai\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/c5edd81b0333e026938f30ed21953916\"},\"headline\":\"How To Create WordPress Theme Mobile Responsive?\",\"datePublished\":\"2023-04-26T08:13:41+00:00\",\"dateModified\":\"2023-08-31T08:23:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive\"},\"wordCount\":1636,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\",\"articleSection\":[\"WordPress Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#respond\"]}],\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive\",\"name\":\"How To Create WordPress Theme Mobile Responsive\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\",\"datePublished\":\"2023-04-26T08:13:41+00:00\",\"dateModified\":\"2023-08-31T08:23:26+00:00\",\"description\":\"Are you looking to develop custom WordPress themes that are mobile responsive? Read further to learn more!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#primaryimage\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg\",\"width\":1021,\"height\":621,\"caption\":\"How To Create WordPress Theme Mobile Responsive?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-create-wordpress-theme-mobile-responsive#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/positiwise.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create WordPress Theme Mobile Responsive?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"name\":\"Positiwise\",\"description\":\"Providing Full-cycle Software Development Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"alternateName\":\"Positiwise Software Pvt Ltd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\",\"name\":\"Positiwise\",\"alternateName\":\"Positiwise Software Pvt Ltd\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"width\":202,\"height\":29,\"caption\":\"Positiwise\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/positiwise\\\/\",\"https:\\\/\\\/x.com\\\/positiwise\",\"https:\\\/\\\/github.com\\\/positiwise\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/positiwise\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/c5edd81b0333e026938f30ed21953916\",\"name\":\"Jemin Desai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"caption\":\"Jemin Desai\"},\"description\":\"Jemin Desai is Chief Marketing Officer at Positiwise Software Pvt Ltd, he is responsible for creating and accelerating the company\u2019s marketing strategy and brand recognition across the globe. He has more than 20 years of experience in senior marketing roles at the Inc. 5000 Fastest-Growing Private Companies.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jeminseo\"],\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/author\\\/jemin-desai\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create WordPress Theme Mobile Responsive","description":"Are you looking to develop custom WordPress themes that are mobile responsive? Read further to learn more!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive","og_locale":"en_US","og_type":"article","og_title":"How To Create WordPress Theme Mobile Responsive?","og_description":"Are you looking to develop custom WordPress themes that are mobile responsive? Read further to learn more!","og_url":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive","og_site_name":"Positiwise","article_publisher":"https:\/\/www.facebook.com\/positiwise\/","article_published_time":"2023-04-26T08:13:41+00:00","article_modified_time":"2023-08-31T08:23:26+00:00","og_image":[{"width":1021,"height":621,"url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg","type":"image\/jpeg"}],"author":"Jemin Desai","twitter_card":"summary_large_image","twitter_creator":"@positiwise","twitter_site":"@positiwise","twitter_misc":{"Written by":"Jemin Desai","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#article","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive"},"author":{"name":"Jemin Desai","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/c5edd81b0333e026938f30ed21953916"},"headline":"How To Create WordPress Theme Mobile Responsive?","datePublished":"2023-04-26T08:13:41+00:00","dateModified":"2023-08-31T08:23:26+00:00","mainEntityOfPage":{"@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive"},"wordCount":1636,"commentCount":0,"publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"image":{"@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg","articleSection":["WordPress Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#respond"]}],"copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/positiwise.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive","url":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive","name":"How To Create WordPress Theme Mobile Responsive","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#primaryimage"},"image":{"@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg","datePublished":"2023-04-26T08:13:41+00:00","dateModified":"2023-08-31T08:23:26+00:00","description":"Are you looking to develop custom WordPress themes that are mobile responsive? Read further to learn more!","breadcrumb":{"@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#primaryimage","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/04\/how-to-create-wordpress-theme-mobile-responsive-1-1.jpg","width":1021,"height":621,"caption":"How To Create WordPress Theme Mobile Responsive?"},{"@type":"BreadcrumbList","@id":"https:\/\/positiwise.com\/blog\/how-to-create-wordpress-theme-mobile-responsive#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/positiwise.com\/blog"},{"@type":"ListItem","position":2,"name":"How To Create WordPress Theme Mobile Responsive?"}]},{"@type":"WebSite","@id":"https:\/\/positiwise.com\/blog\/#website","url":"https:\/\/positiwise.com\/blog\/","name":"Positiwise","description":"Providing Full-cycle Software Development Services","publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"alternateName":"Positiwise Software Pvt Ltd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/positiwise.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/positiwise.com\/blog\/#organization","name":"Positiwise","alternateName":"Positiwise Software Pvt Ltd","url":"https:\/\/positiwise.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","width":202,"height":29,"caption":"Positiwise"},"image":{"@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/positiwise\/","https:\/\/x.com\/positiwise","https:\/\/github.com\/positiwise","https:\/\/www.linkedin.com\/company\/positiwise"]},{"@type":"Person","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/c5edd81b0333e026938f30ed21953916","name":"Jemin Desai","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","caption":"Jemin Desai"},"description":"Jemin Desai is Chief Marketing Officer at Positiwise Software Pvt Ltd, he is responsible for creating and accelerating the company\u2019s marketing strategy and brand recognition across the globe. He has more than 20 years of experience in senior marketing roles at the Inc. 5000 Fastest-Growing Private Companies.","sameAs":["https:\/\/www.linkedin.com\/in\/jeminseo"],"url":"https:\/\/positiwise.com\/blog\/author\/jemin-desai"}]}},"_links":{"self":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/comments?post=8312"}],"version-history":[{"count":10,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8312\/revisions"}],"predecessor-version":[{"id":12975,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8312\/revisions\/12975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media\/9787"}],"wp:attachment":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media?parent=8312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/categories?post=8312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/tags?post=8312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}