{"id":4449,"date":"2014-05-17T08:58:06","date_gmt":"2014-05-17T08:58:06","guid":{"rendered":"http:\/\/demo.momizat.net\/goodnews\/?p=108"},"modified":"2014-05-17T08:58:06","modified_gmt":"2014-05-17T08:58:06","slug":"wordpress-theme-development-process","status":"publish","type":"post","link":"https:\/\/bulandrashtrawadi.in\/?p=4449","title":{"rendered":"Improve WordPress Theme Development Process"},"content":{"rendered":"<p>There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.<\/p>\n<p>Rather than write another article on building a WordPress theme (which would be silly, really, since any theme I build would fall into the \u201ccrappy\u201d category), <strong>I\u2019ve asked some of the top theme designers and developers<\/strong> to share some tips and techniques to help you improve and refine your theme development and design process.<\/p>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/01\/splash.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-108219\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/01\/splash.jpg\" alt=\"splash\" \/><\/a><\/p>\n<p>Before we get into that, Mark Forrester, cofounder of <a href=\"http:\/\/woothemes.com\/\">WooThemes<\/a>, has shared some insight into his firm\u2019s development process. Given WooThemes\u2019 success, no doubt we can all learn something from it.<\/p>\n<h3>A Peek Into Woo<\/h3>\n<p>Whether you work in a large theme shop or are a lone designer, you can <strong>learn plenty<\/strong>from another designer or developer\u2019s workflow.<\/p>\n<ol>\n<li>A theme at WooThemes starts life on the <a href=\"http:\/\/ideas.woothemes.com\/\">ideas board<\/a>, through specifications provided by the community or based on a concept that\u2019s emerged from customer research. It is designed either in house or by an industry-leading designer who is hired on contract.<\/li>\n<li>The theme is then meticulously designed in Photoshop. All of the major elements are styled and the pages constructed <strong>before any code is touched<\/strong>. Mark recommends <a href=\"http:\/\/photoshopetiquette.com\/\">Photoshop Etiquette<\/a> for guidelines on structuring your design file. He says, \u201cThe better the Photoshop file, the easier the theme build.\u201d<\/li>\n<li>Once the design is approved, it\u2019s assigned to a developer, who works from WooThemes\u2019 base theme. This includes the templates that come with every WooTheme, along with basic styling. The base theme has a responsive layout, and the CSS is managed using <a href=\"http:\/\/lesscss.org\/\">LESS<\/a>, which Mark strongly recommends.<\/li>\n<li>Theme development is managed with <a href=\"https:\/\/trello.com\/\">Trello<\/a>, and milestones are set with<a href=\"http:\/\/teamgantt.com\/\">TeamGantt<\/a>.<\/li>\n<li>Once the theme is finalized, the developer creates a demo for the website that is populated with dummy content and that tests almost every element of the design.<\/li>\n<li>The team sets about beta testing the theme. A list of bugs, tweaks and solutions is compiled, a hackathon is scheduled, and everything is completed by the developer.<a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/01\/woo_athena.png\"><img decoding=\"async\" title=\"Larger view\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/01\/woo_athena.png\" alt=\"A hackathon is scheduled.\" \/><\/a><\/li>\n<li>For WooThemes\u2019 own redesign (which is awesome \u2014 congrats, guys!), the team started to use <a href=\"http:\/\/www.bugherd.com\/\">BugHerd<\/a>, which helped them gather user feedback and track it directly in the pages.<\/li>\n<li>All revisions are included in the change log for easy reference. A strict numbering convention distinguishes between bug fixes and new features.<a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/01\/woo_canvas.png\"><img decoding=\"async\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/01\/woo_canvas.png\" alt=\"A strict numbering convention distinguishes between bug fixes and new features.\" \/><\/a><br \/>\n<em><a href=\"http:\/\/media.smashingmagazine.com\/wp-content\/uploads\/2013\/01\/woo_canvas.png\">Larger view<\/a>.<\/em><\/li>\n<\/ol>\n<p>That\u2019s a lot of process right there. Creating a WooTheme theme is about much more than knocking out a few lines of code. Here\u2019s what Mark has to say:<\/p>\n<blockquote><p>\u201cWhen we create and edit our themes it is not simply diving into the code. We have to carefully consider our community of users and how any code might impact their usage, and the template files\u2019 customization ability.\u201d<\/p><\/blockquote>\n<p>Apart from workflow, what else can be learned from professional theme designers and developers?<\/p>\n<h3>Develop Locally<\/h3>\n<p>If you\u2019re not developing locally, then now\u2019s the time to start. Here\u2019s what <a href=\"http:\/\/chriscoyier.net\/\">Chris Coyier<\/a> has to say about it:<\/p>\n<blockquote><p>\u201cDesigners and developers who work mostly on WordPress sites are, in my experience, the worst offenders of the \u201cjust do it live\u201d development system. FTP commandos, if you will. I know \u2014 I was one for a lot of years. I suspect it\u2019s the case because there are quite a few requirements to run a WordPress site locally: an Apache server running PHP and a MySQL database.<\/p>\n<p>These things aren\u2019t preinstalled on most computers like they are on most servers. Even if you get over those hurdles, setting up a workflow between local and live isn\u2019t trivial.\u201d<\/p><\/blockquote>\n<p>Luckily for you, Chris is going to show you a better way. Developing locally is easy to get started with.<\/p>\n<h4>STEP 1: SET UP MAMP<\/h4>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.youtube.com\/embed\/GiRC8LOlds4\" width=\"500\" height=\"375\"><\/iframe><\/p>\n<h4>STEP 2: GET OFF FTP<\/h4>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.youtube.com\/embed\/cUeMF18zA4Y\" width=\"500\" height=\"281\"><\/iframe><\/p>\n<p>Developing locally has so many benefits. In particular, you\u2019ll be able to do the following:<\/p>\n<ul>\n<li>Have a record of everything that has ever changed and when it changed.<\/li>\n<li>Roll back mistakes.<\/li>\n<li>Become more efficient by using text-editor features such as \u201cFind in Project.\u201d<\/li>\n<li>Work on major redesigns without worrying about screwing up a live website.<\/li>\n<\/ul>\n<h4>ALTERNATIVE TOOLS FOR A LOCAL SERVER<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.apachefriends.org\/en\/xampp.html\">XAMPP<\/a>, Apache Friends<\/li>\n<li>\u201c<a href=\"http:\/\/wpmu.org\/install-wordpress-locally-on-windows-with-xampp\/\">Install WordPress Locally on Windows With XAMPP<\/a>,\u201d Siobhan McKeown, WPMU.org<\/li>\n<li>\u201c<a href=\"http:\/\/rzen.net\/development\/local-develoment-in-osx\/\">Configuring a Local Apache\/PHP\/MySQL Dev Environment in OS X<\/a>,\u201d Brian Richards<\/li>\n<li><a href=\"http:\/\/www.wampserver.com\/en\/\">WampServer<\/a><\/li>\n<\/ul>\n<h3>Use Live Reload<\/h3>\n<p>When you\u2019re developing a theme, switching to the browser and reloading the page gets old pretty fast. That\u2019s why Drew Strojny, founder of <a href=\"http:\/\/thethemefoundry.com\/\">The Theme Foundry<\/a> and the guy behind WordPress\u2019 gorgeous new <a href=\"http:\/\/wordpress.org\/extend\/themes\/twentytwelve\">Twenty Twelve<\/a> default theme, uses <a href=\"http:\/\/livereload.com\/\">LiveReload<\/a>:<\/p>\n<blockquote><p>\u201cLiveReload is a great little application that works through a browser extension. LiveReload automatically reloads your page when a file has been changed in your project.<\/p>\n<p>This is a huge productivity boon when you\u2019re editing and tweaking a WordPress theme. All those small page refreshes add up to a big chunk of time saved at the end of the day. Not to mention, your fingers get a much needed break!\u201d<\/p><\/blockquote>\n<p>The Theme Foundry loves LiveReload so much that it\u2019s built support for it into <a href=\"http:\/\/forge.thethemefoundry.com\/\">Forge<\/a>, its free command-line toolkit for bootstrapping and developing WordPress themes.<\/p>\n<h3>Use Git<\/h3>\n<p>Git is a distributed version-control system that is popular among developers all over the world. The great thing about Git is that you can quickly create a branch, make changes within that branch and then test those changes without affecting the master version. It\u2019s what The Theme Foundry uses for every project:<\/p>\n<blockquote><p>\u201cQuite honestly, we\u2019d be lost without it. Git makes branching cheap and easy. You can experiment quickly with different ideas without worrying about getting lost. Think of it like the trail of pebbles left by Hansel and Gretel to help them find their way back home.<\/p>\n<p>Git gives you the power to leave nicely annotated pebbles along your development path. If you see something interesting and wander off the trail, but then later change your mind, you can always get back to where you started.\u201d<\/p><\/blockquote>\n<h4>LEARNING GIT<\/h4>\n<ul>\n<li><a href=\"http:\/\/gitimmersion.com\/\">Git Immersion<\/a><\/li>\n<li><a href=\"http:\/\/think-like-a-git.net\/\">Think Like (a) Git<\/a><\/li>\n<li><a href=\"http:\/\/try.github.com\/levels\/1\/challenges\/1\">tryGit<\/a><\/li>\n<\/ul>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<p>from : http:\/\/www.smashingmagazine.com\/2013\/02\/21\/wp-theme-development-process\/<\/p>\n<blockquote class=\"mom_quote \" style=\"font-family:verdana;font-size:14px;font-style:italic;border-left-color:#dd9933; color:#474747; background-color:#F5F5F5; \"><span class=\"quote-arrow\" style=\"border-left-color:#dd9933;\"><\/span>This Demo Content Brought to you by <a href=\"http:\/\/momizat.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Momizat Team<\/a> <\/blockquote>\n<h2>this is tags and keywords : wordpress themes momizat Tutorial wordpress  templates<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[24,75,78,79,80,83,51],"_links":{"self":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts\/4449"}],"collection":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4449"}],"version-history":[{"count":0,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts\/4449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}