How To Modify Your Wordpress Theme Via The Browser Using Stiqr
2010-04-27
1148 words
6 mins read
<a href="http://feedads.g.doubleclick.net/%7Ea/O7jc_lFA7WTnPLGHjbYaxjhpRBM/0/da"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Ea/O7jc_lFA7WTnPLGHjbYaxjhpRBM/0/di" alt="" align="bottom" />
<a href="http://feedads.g.doubleclick.net/%7Ea/O7jc_lFA7WTnPLGHjbYaxjhpRBM/1/da"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Ea/O7jc_lFA7WTnPLGHjbYaxjhpRBM/1/di" alt="" align="bottom" />
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/00_Stiqr_logo.jpg" alt="00_Stiqr_logo.jpg" width="253" height="114" align="bottom" />Ordinary <a href="http://www.makeuseof.com/tag/how-to-build-a-self-hosted-wordpress-blog-for-free/">self-hosted WordPress users know only too well that even though choosing and using thousands of available themes is a snap, creating one is an almost impossible task. You could use <a href="http://www.makeuseof.com/tag/customize-design-wordpress-theme-easily-constructor/">one of the customizable themes to modify the look to your liking, but that’s as far as you can go. Theme creating is not for the faint-hearted who are afraid to plunge into <a class="zem_slink freebase/en/html" title="HTML" rel="wikipedia" href="http://en.wikipedia.org/wiki/HTML">HTML, <a class="zem_slink freebase/en/php" title="PHP" rel="homepage" href="http://www.php.net/">PHP and <a class="zem_slink freebase/en/cascading_style_sheets" title="Cascading Style Sheets" rel="wikipedia" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS coding.
But that’s not the case anymore. I recently stumbled across a WordPress theme <a class="zem_slink freebase/en/editing" title="Editing" rel="wikipedia" href="http://en.wikipedia.org/wiki/Editing">editor plugin called <a href="http://www.stiqr.com/">Stiqr – still in beta as every other Web 2.0 service is – which can help ordinary web users to become a “skillful” <a class="zem_slink freebase/en/web_design" title="Web design" rel="wikipedia" href="http://en.wikipedia.org/wiki/Web_design">web designer. If you can <a class="zem_slink freebase/en/drag-and-drop" title="Drag-and-drop" rel="wikipedia" href="http://en.wikipedia.org/wiki/Drag-and-drop">drag and drop objects, you can modify the look of your web. Self-hosted WordPress is officially included in the list of supported type of websites.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/02_Also_works_on.png" alt="Wordpress theme editor plugin" width="300" height="320" align="bottom" />
And everything is done without the need for a standalone web builder application, or the coding knowledge. All you need is a browser.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/01_Stiqr_front_page.jpg" alt="Wordpress theme editor plugin" width="550" height="325" align="bottom" />
<span style="font-size: medium;">Setting Up The Stage
If you’ve always wanted to design your own <a class="zem_slink freebase/en/website" title="Website" rel="wikipedia" href="http://en.wikipedia.org/wiki/Website">website but the all the technical terminologies scared you, now is the perfect time for you to start. Visit Stiqr and click on the “Get Started Now“.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/03_Get_Started.png" alt="Wordpress theme editor plugin" width="500" height="165" align="bottom" />
But don’t expect to see the ordinary sign-up process because it’s not that obvious. Before going through the “Enter Your Name” and “Enter Your Email” routines, you have to insert one line of code in your website. But you don’t have to tremble with fear, because all the steps are painless in WordPress.
Stiqr will provide you with the code, save it to be used later.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/05-One-Line-of-Code.jpg" alt="wordpress theme editor" width="566" height="198" align="bottom" />
Armed with the code, login to your WordPress.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/06-WP-Login.jpg" alt="wordpress theme editor" width="339" height="335" align="bottom" />
Then navigate to the right sidebar, and click “Editor” under the “Appearance” menu.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/07-Theme-Editor.jpg" alt="wordpress theme editor" width="175" height="279" align="bottom" />
Within the WordPress theme editor plugin, find the “Footer (footer.php)” and click on the link to edit.
<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/07b-Edit-Footer.jpg" alt="wordpress blog editor" width="345" height="260" align="bottom" />
You will see the editable lines of codes for “footer.php“. Navigate to the lower part of the codes and find the closing line for the body – “