{"id":5339,"date":"2016-08-24T10:13:52","date_gmt":"2016-08-24T17:13:52","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=5339"},"modified":"2016-08-25T11:08:44","modified_gmt":"2016-08-25T18:08:44","slug":"create-responsive-theme-for-wordpress-with-twenty-ten","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/create-responsive-theme-for-wordpress-with-twenty-ten.html","title":{"rendered":"Create Responsive Theme For WordPress With Twenty Ten"},"content":{"rendered":"<p><em>In order for the blogs or website to be popular, they must be mobile friendly since mobile devices are on the rise. I&#8217;m sure there are many efficient themes for WordPress that support mobile devices, but I like to create a simple one for my blogs using<a href=\"https:\/\/wordpress.org\/themes\/twentyten\/\" target=\"_blank\"> Twenty Ten WordPress theme<\/a>. This is how I modify the original theme since it&#8217;s no longer supported and updated. The goal is to have a theme that adjust the viewports to accommodate all screen sizes to read clearly and easily with both fonts, images and videos. I did create 2 css&#8217;s: 1 for the index and 1 for the single<\/em><\/p>\n<ul>\n<li><em>For all screens width above 1280px, full screen design.<\/em><\/li>\n<li><em>For all screens width greater than 800px but less than 1280px, we should have sidebar and content resized to fit (35% and 65% respectively), the footer widgets (50%).<\/em><\/li>\n<li><em>For all screens width less than 800px, we should have content, footer, sidebar widths = 100%, we increase font size t0 105%.<\/em><\/li>\n<li><em>For all screens width max-width = 600px, include all smart phones, we increase font size 110%.<\/em><\/li>\n<\/ul>\n<p><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?url=http%3A%2F%2Fwww.dognmonkey.com%2Ftechs%2Fhow-to-remove-scripts-on-mobile-devices.html&amp;tab=desktop\" target=\"_blank\">Page Speed Test Google<\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_responsive_theme.jpg\" rel=\"lightbox[2010]\" title=\"PageSpeed Insights Mobile Score Check\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5948\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_responsive_theme-200x112.jpg\" alt=\"Responsive Theme Checked with PageSpeed Insights\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" rel=\"lightbox[2010]\" href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_desktop-1.jpg\" title=\"PageSpeed Insights Desktop Score Check\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5950\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_desktop-1-200x112.jpg\" alt=\"PageSpeed Insights Desktop Score Check\" width=\"200\" height=\"112\" \/><\/a>\u00a0 \u00a0 \u00a0<a class=\"preview\" rel=\"lightbox[2010]\" href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_mobile.jpg\" title=\"PageSpeed Insights Mobile Score Check\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5951\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_mobile-200x112.jpg\" alt=\"PageSpeed Insights Mobile Score Check\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>To solve Android browsers NOT scrolling, use <span class=\"highLT\">&lt;<\/span><span class=\"highELE\">meta<\/span>\u00a0<span class=\"highATT\">name=<\/span><span class=\"highVAL\">&#8220;viewport&#8221;<\/span>\u00a0<span class=\"highATT\">content=<\/span><span class=\"highVAL\">&#8220;width=device-width, initial-scale=1.02&#8221;<\/span><span class=\"highGT\">&gt;, increase the initial-scale=1.02 instead of 1.0.<\/span><\/p>\n<p><em>Or we can remove all &#8220;overflow: hidden&#8221; in the CSS.<\/em><\/p>\n<p><em>Or we can use the <a href=\"\/\/stackoverflow.com\/questions\/11002956\/android-default-browser-not-scrolling-web-page\" target=\"_blank\">script that I found on the web<\/a>.<\/em><br \/>\n<code>&lt;script type=\"text\/javascript\"&gt;<br \/>\nwindow.onload=function(){<br \/>\nvar ua = navigator.userAgent;<br \/>\nif(ua.indexOf(\"Android\")&gt;=0){<br \/>\nvar androidversion=parseFloat(ua.slice(ua.indexOf(\"Android\")+8));<br \/>\nif(androidversion&lt;=2.3){<br \/>\ndocument.getElementsByName(\"viewport\")[0].setAttribute(\"content\",\"width=device-width, initial-scale=1.02\");<br \/>\n}<br \/>\n}<br \/>\n};<br \/>\n&lt;\/script&gt;<\/code><br \/>\nBootstrap: word-wrap:break-word for collapsible button.<br \/>\nFind .btn, replace whitespace:nowrap with word-wrap:break-word;<\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/01\/z_btn_bs.jpg\" rel=\"lightbox[bs]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5342\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/01\/z_btn_bs-200x47.jpg\" alt=\"whitespace_nowrap\" width=\"200\" height=\"47\" \/><\/a>\u00a0 \u00a0 \u00a0<a class=\"preview\" href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/01\/z_btn_bs1.jpg\" rel=\"lightbox[bs]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5343\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/01\/z_btn_bs1-200x66.jpg\" alt=\"word-wrap_break-word\" width=\"200\" height=\"66\" \/><\/a><\/p>\n<p>Autosize iframe youtube to fit mobile = add codes to css.<br \/>\n<code>embed,<br \/>\niframe,<br \/>\nobject {<br \/>\nmax-width: 100%;<br \/>\n}<\/code><\/p>\n<p>css for code<br \/>\n<code>pre {<br \/>\nfont-family: \"Courier 10 Pitch\", Courier, monospace;<br \/>\nfont-size: 95%;<br \/>\nline-height: 140%;<br \/>\n}<br \/>\ncode {<br \/>\nfont-family: Monaco, Consolas, \"Andale Mono\", \"DejaVu Sans Mono\", monospace;<br \/>\nfont-size: 95%;<br \/>\nline-height: 140%;<br \/>\n}<br \/>\n#content code {<br \/>\ndisplay: block;<br \/>\npadding: 0.5em 1em;<br \/>\nborder: 1px solid #666;<br \/>\nbackground: #0d0200;<br \/>\ncolor:#ffb499;<br \/>\n}<\/code><br \/>\n<em>If we&#8217;re using <a href=\"\/\/www.dognmonkey.com\/techs\/fotorama-io-in-wordpress-without-plugin.html\" target=\"_blank\">fotorama<\/a> and we want it to display the gallery in the center at all time, we need to add the codes<\/em><br \/>\n<code><br \/>\n.fotorama__wrap {margin: 0 auto;}<br \/>\n<\/code><br \/>\n<em>For Body .custom-background using images or special color, we need to add codes<\/em><br \/>\n<code>body.custom-background{<br \/>\nheight:auto;<br \/>\nbackground: url('images\/black_linen2.jpg')repeat;}<\/code><br \/>\n<em>For numbers and bullets, we have to define in the css with codes<\/em><br \/>\n<code>.entry-content ul li { margin-left:20px; list-style-type: circle; }<br \/>\n.entry-content ol li { margin-left:20px;list-style-type: decimal;}<\/code><br \/>\n<em>I use FontAwesome for tags and stuff, I need to define them in the CSS also, make sure to load the FontAwesome.css in the head, change the font color to match the background.<\/em><br \/>\n<code>.genericon:before,<br \/>\n.menu-toggle:after,<br \/>\n.featured-post:before,<br \/>\n.date a:before,<br \/>\n.entry-meta .author a:before,<br \/>\n.format-audio .entry-content:before,<br \/>\n.comments-link a:before,<br \/>\n.tags-links a:first-child:before,<br \/>\n.categories-links a:first-child:before,<br \/>\n.edit-link a:before,<br \/>\n.attachment .entry-title:before,<br \/>\n.attachment-meta:before,<br \/>\n.attachment-meta a:before,<br \/>\n.comment-awaiting-moderation:before,<br \/>\n.comment-reply-link:before,<br \/>\n.comment-reply-login:before,<br \/>\n.comment-reply-title small a:before,<br \/>\n.bypostauthor &gt; .comment-body .fn:before,<br \/>\n.error404 .page-title:before {<br \/>\n-webkit-font-smoothing: antialiased;<br \/>\ndisplay: inline-block;<br \/>\nfont: normal 16px\/1 Genericons;<br \/>\nvertical-align: text-bottom;<br \/>\ntext-align:left;<br \/>\n}<br \/>\n.featured-post:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f08d\";\/*\"\\f308\";*\/<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<br \/>\n.entry-meta .date a:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f073\";\/*\"\\f303\";*\/<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<br \/>\n.comments-link a:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f086\";\/*\"\\f300\";*\/<br \/>\nposition: relative;<br \/>\ntop: -1px;<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<br \/>\n.entry-meta .author a:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f007\";\/*\"\\f304\";*\/<br \/>\nposition: relative;<br \/>\ntop: -1px;<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<br \/>\n.categories-links a:first-child:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f022\";\/*\"\\f301\";*\/<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<br \/>\n.tags-links a:first-child:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f02b\";\/*\"\\f302\";*\/<br \/>\nposition: relative;<br \/>\ntop: -1px;<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<br \/>\n.edit-link a:before {<br \/>\nfont-family: FontAwesome;<br \/>\ncontent: \"\\f044\";\/*\"\\f411\";*\/<br \/>\nposition: relative;<br \/>\ntop: -1px;<br \/>\nmargin: 0 2px;<br \/>\nfont-size:150%;<br \/>\ncolor: #fff;<br \/>\npadding:0 .5%;<br \/>\n}<\/code><br \/>\nwill continue<\/p>\n<p style=\"text-align: center;\"><ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In order for the blogs or website to be popular, they must be mobile friendly since mobile devices are on the rise. I&#8217;m sure there are many efficient themes for WordPress that support mobile devices, but I like to create a simple one for my blogs using Twenty Ten WordPress theme. This is how I <a href=\"https:\/\/www.dognmonkey.com\/techs\/create-responsive-theme-for-wordpress-with-twenty-ten.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288,26],"tags":[799,918,920,919,795,326,917],"class_list":["post-5339","post","type-post","status-publish","format-standard","hentry","category-css-wordpress","category-themes","tag-bootstrap-collapsible","tag-device-width","tag-fotorama","tag-initial-scale1-02","tag-responsive-theme","tag-twenty-ten-theme","tag-viewport"],"views":565,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/5339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=5339"}],"version-history":[{"count":4,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/5339\/revisions"}],"predecessor-version":[{"id":5953,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/5339\/revisions\/5953"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=5339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=5339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=5339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}