post/page pagination and only displays comments on the last page of each paginated post/page.featured images per post displayed both in page archives and prominently at the top of each post.Supports the following WordPress features:.I’ve minified all the working CSS and JavaScript files and enqueued them, for quicker loading times. I’ve taken as many steps as possible to keep this theme running quickly.I’ve added microformatted HTML to enable Google to see your posts as articles (see how Google interprets this article using the Google Structured Data Testing Tool).ready for Google Authorship with pages for each author, just add your Google Plus author link in your description.homepage is setup to be unique, avoiding many duplicate content issues inherit to WordPress.h1 for each page is designated by the topic of the page, not always the website’s name.cuts down on duplicated content on archival pages by using excerpts.Compensates for cross-browser inconsistencies using normalize.css (should display consistently across Google Chrome, Mozilla Firefox 4+, Apple Safari 5+, Opera 12+, and Internet Explorer 8+).Responsive and designed from a “mobile first” perspective.Typography for easy reading, which you can see with the default, lined background (that can be easily changed from within wordpress).We do so by changing the CSS inside the stylesheet.I’ve taken the Fluid Baseline Grid (originally created by Josh Hopkins) and converted it into a mobile-first, typographically clear WordPress theme. Our task is now to make sure these have fluid width definitions instead of static ones. Next up, you need to find the containers for the main sections of your site.įor this, the aforementioned Firebug comes in handy as it can display the HTML structure of your website inside the browser.Ī typical WordPress theme will have the following elements: The code goes between the and tags.Īll done? Then let’s move on. In WordPress, adding things to the site header this is typically done by editing the header.php file in your theme folder. What it does is tell browsers to render your pages based on device width, meaning if the screen used is only 320px wide, the website will be rendered in the same size instead of falling back to a larger default size. Our very first step is to add the following line of code to the header of our site: We have a detailed tutorial for this, right here on Torque. You might also want to consider setting up your site in a local development environment so you can experiment with making it responsive without messing with your live site. A simple text editor like Notepad++ will work for this but you can find other options in this article. In addition to that, we will have to edit some PHP and HTML files. (Btw, have you checked out our collection of development tools yet?) My favorite tool to do so is Firebug, however, you can also use Chrome Developer Tools, and Firefox Developer Tools. The tools we need to implement this are readily available.įirst off, we need a way to check our site’s HTML and CSS structure. You might have to do some custom work for your own site. Therefore, consider this only as the broad strokes. Using CSS media queries to define break points for design changesįrom here, we will learn how to use the above to turn a static WordPress theme into a responsive one.īe aware, however, that while the principles stay the same, your theme might be built differently than the examples below.Implementing design changes to ensure usability for non-desktop devices.Fluid site grid with proportionate instead of fixed measures.How To Convert Your WordPress Theme To Responsive Designįirst, we need to go over the basics of responsive design: However, even if you are merely interested in learning how to implement responsive design in practical terms, this is the article for you. Having a responsive website is incredibly important. This tutorial is especially important if you are still running a static theme that you want to make responsive.ĭoing so can often be easier than taking an already responsive theme and customizing it to fit your design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |