FA+
Shop
Tech Tip: Is your WP site mobile ready?
2 years ago
"If you think no one cares about you...
--
--
Wordpress people, im talking to you. :D
Got a quick tip i wanna share on this because its been something I really count on. if you own a website on Wordpress, and you trust yourself in editing a few bits without breaking the site, (im not responsible, BTW :D) then do this if you want the site mobile friendly:
Go to your Dashboard (be in wp-admin mode for this, so its https://your full domain/wp-admin and then select "Appearance".
From there you want "Theme file editor" and then you want to scroll through the file list on your right to look for "header.php". This is your main template for the website, how its gonna look and feel. this is different from the style.css section that lets you set allllll the fun fiddly bits like text, links, image projection, etc. so dont mess with THAT unless you iz a guru. :D
you'll get a warning from WP saying stuff like "dont mess with this shit, n00b!" :D ignore it and just say that yes, you want to mess with it. :D
Now open "header.php" in your -- you know what, before you do ANYTHING, BACK UP your site. :D The Updraft plugin is great for this, and it should be free. (if not, there's manual ways to do it too through FTP, you can do eet!)
So you open header.php and you want to look for lines that start and end with <head> and </head> it doesnt matter if theres already stuff in it, its fine. Many themes add all kinds of stuff. :D select any place within these <head> and </head> lines and add the following line by creating a new line with enter:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this is essentially gonna do is when a user comes to your site, automatically the site will check to see the user's viewport, be it a PC screen, tablet screen, mobile, etc. Based on the viewport type, the meta tag will then display the correct "content" automatically, using the "device-width" (meaning based on the viewport, for example a mobile phone, now the content will be displayed as it should for a mobile phone.
The "initial scale" tag indicates basically that the pixels according to what your device is capable of vs. what the pixel settings are in the CSS (stylesheet; that style.css file i told you not to touch) no matter what the device orientation is. so in this instance, we're telling people "your phone is capable of 3.2 megapixels so this is how you'll see content" - which also takes full advantage of landscape views automatically.
Run your site through a mobile-friendly checker like this one:
https://search.google.com/test/mobile-friendly
and you can test to see how things went. (Im getting SEO certified for all kinds of stuff too, so i can help folks get their sites working well, and ranked higher on Google search pages, so feel free to note me about that too. i'm very cheap.) :D
incidentally, you DONT need Wordpress to rank high, i just use it so much, its like second nature to me. :D
Got a quick tip i wanna share on this because its been something I really count on. if you own a website on Wordpress, and you trust yourself in editing a few bits without breaking the site, (im not responsible, BTW :D) then do this if you want the site mobile friendly:
Go to your Dashboard (be in wp-admin mode for this, so its https://your full domain/wp-admin and then select "Appearance".
From there you want "Theme file editor" and then you want to scroll through the file list on your right to look for "header.php". This is your main template for the website, how its gonna look and feel. this is different from the style.css section that lets you set allllll the fun fiddly bits like text, links, image projection, etc. so dont mess with THAT unless you iz a guru. :D
you'll get a warning from WP saying stuff like "dont mess with this shit, n00b!" :D ignore it and just say that yes, you want to mess with it. :D
Now open "header.php" in your -- you know what, before you do ANYTHING, BACK UP your site. :D The Updraft plugin is great for this, and it should be free. (if not, there's manual ways to do it too through FTP, you can do eet!)
So you open header.php and you want to look for lines that start and end with <head> and </head> it doesnt matter if theres already stuff in it, its fine. Many themes add all kinds of stuff. :D select any place within these <head> and </head> lines and add the following line by creating a new line with enter:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this is essentially gonna do is when a user comes to your site, automatically the site will check to see the user's viewport, be it a PC screen, tablet screen, mobile, etc. Based on the viewport type, the meta tag will then display the correct "content" automatically, using the "device-width" (meaning based on the viewport, for example a mobile phone, now the content will be displayed as it should for a mobile phone.
The "initial scale" tag indicates basically that the pixels according to what your device is capable of vs. what the pixel settings are in the CSS (stylesheet; that style.css file i told you not to touch) no matter what the device orientation is. so in this instance, we're telling people "your phone is capable of 3.2 megapixels so this is how you'll see content" - which also takes full advantage of landscape views automatically.
Run your site through a mobile-friendly checker like this one:
https://search.google.com/test/mobile-friendly
and you can test to see how things went. (Im getting SEO certified for all kinds of stuff too, so i can help folks get their sites working well, and ranked higher on Google search pages, so feel free to note me about that too. i'm very cheap.) :D
incidentally, you DONT need Wordpress to rank high, i just use it so much, its like second nature to me. :D
Like our "The Depths" site, which uses an outdated theme... sadly its not been updated so we're just waiting for the day Wordpress makes an update that smashes it. =P