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 – “” – and insert the code that you got from Stiqr above it. Then click the “Update File” button.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/07c-Insert-stiqr-code.jpg" alt="wordpress blog editor" width="340" height="220" align="bottom" />

After the “File edited successfully” notification appear, go to the main page of your WordPress by clicking “Visit Site” button next to the title of your blog.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/07d-Edit-success-Visit-Web.jpg" alt="wordpress blog editor" width="367" height="206" align="bottom" />

That concludes the preparation stage.

<span style="font-size: medium;">Turn Your WordPress Into A Sticker Scrapbook

On the front page of your WordPress blog, press the <a class="zem_slink freebase/en/keyboard_shortcut" title="Keyboard shortcut" rel="wikipedia" href="http://en.wikipedia.org/wiki/Keyboard_shortcut">key combination of “Shift + F2” to start Stiqr. As a first time Stiqr user, you will have to register first. Start by entering your <a class="zem_slink freebase/en/e-mail_address" title="E-mail address" rel="wikipedia" href="http://en.wikipedia.org/wiki/E-mail_address">email address and click “OK“.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/08a-Shift-F2-Registration.jpg" alt="wysiwyg wordpress theme editor" width="339" height="161" align="bottom" />

Then continue by choosing your preferred password followed by another “OK“. My advice: please come up with a strong password for this one.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/08b-Password-Needed.jpg" alt="wysiwyg wordpress theme editor" width="333" height="160" align="bottom" />

If the registration is successful, a notification window will pop-up along with a thank you note and what to do next: wait for the page to be refreshed and press “Shift + F2” button one more time.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/08c-Registration-Successful-1.jpg" alt="wysiwyg wordpress theme editor" width="476" height="173" align="bottom" />

You will be asked to enter your password to log in. Some might think that this step is unnecessary, but you really need the protection since everybody could access this page. You don’t want anybody to mess around with the look of your site, do you? This is also the reason why you need a strong password.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/09-Login-to-Edit.jpg" alt="09 Login to Edit.jpg" width="332" height="158" align="bottom" />

Upon successful login, an editor bar will appear at the bottom of your page. You can start using the tools and let your creativity go wild.

<img src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/10-Start-to-Build-A-Blog.jpg" alt="10 Start to Build A Blog.jpg" width="499" height="393" align="bottom" />

I will save the the discussion about editing the look of your webpage using Stiqr for the next part of this article. Until then, you can experiment and get yourself familiar with this cool web-based WYSIWYG web editor.

So far, my opinion about Stiqr is that it has opened up a whole new horizon that I’ve never thought possible: live editing the look of WordPress (or any other kind of website) directly from the browser without the need for coding knowledge. I am absolutely sure that I’ll use this service often in the future.

What do you think of Stiqr? Do you know similar services out there? Please share using the comments below.

Similar MakeUseOf Articles

  • <a href="http://www.makeuseof.com/tag/how-to-save-87-by-making-a-free-thesis-wordpress-theme-clone/">Save $87 By Making A Free ‘Thesis’ WordPress Theme Clone (25 comments)
  • <a href="http://www.makeuseof.com/tag/safely-experiment-customizing-wordpress-themes/">How To Safely Experiment With Customizing WordPress Themes (9 comments)
  • <a href="http://www.makeuseof.com/tag/how-to-change-your-wordpress-blog-theme-in-3-easy-steps/">How To Change Your WordPress Blog Theme In 3 Easy Steps (11 comments)
  • <a href="http://www.makeuseof.com/tag/create-wordpress-blog-facebook-template-foxinni/">Foxinni Facebook Template Makes Your WordPress Blog Look Like Facebook (1 comments)
  • <a href="http://www.makeuseof.com/tag/customize-design-wordpress-theme-easily-constructor/">Design Your Own WordPress Theme Easily With Constructor (12 comments)
  • <a href="http://www.makeuseof.com/tag/a-beginners-guide-to-building-your-own-wordpress-theme/">A Beginner’s Guide To Building Your Own WordPress Theme (15 comments)
  • <a href="http://www.makeuseof.com/tag/4-good-websites-for-great-wordpress-and-blogger-skins/">4 Websites for Great WordPress Themes & Blogger Skins (9 comments)
  • <a href="http://www.makeuseof.com/tag/understanding-windows-7-themes-inside-out/">Your Easy Guide to Windows 7 Themes (23 comments)
  • <a href="http://www.makeuseof.com/tag/top-5-windows-7-themes/">Top 5 Windows 7 Themes You Might Want To Try (18 comments)
  • <a href="http://www.makeuseof.com/tag/the-first-wordpress-plugins-you-must-install/">The First WordPress Plugins You Must Install (34 comments)

<a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:qj6IDK7rITs"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?d=qj6IDK7rITs" alt="" align="bottom" /> <a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:gIN9vFwOqvQ"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?i=X7l7fwwrXFo:3Q6GjUxeQfw:gIN9vFwOqvQ" alt="" align="bottom" /> <a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:yIl2AUoC8zA"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?d=yIl2AUoC8zA" alt="" align="bottom" /> <a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:V_sGLiPBpWU"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?i=X7l7fwwrXFo:3Q6GjUxeQfw:V_sGLiPBpWU" alt="" align="bottom" /> <a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:F7zBnMyn0Lo"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?i=X7l7fwwrXFo:3Q6GjUxeQfw:F7zBnMyn0Lo" alt="" align="bottom" /> <a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:I9og5sOYxJI"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?d=I9og5sOYxJI" alt="" align="bottom" /> <a href="http://feeds.feedburner.com/%7Eff/Makeuseof?a=X7l7fwwrXFo:3Q6GjUxeQfw:D7DqB2pKExk"><img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Eff/Makeuseof?i=X7l7fwwrXFo:3Q6GjUxeQfw:D7DqB2pKExk" alt="" align="bottom" /> <img src="http://blog.amit-agarwal.com/wp-content/uploads/img.zemanta.com/%7Er/Makeuseof/%7E4/X7l7fwwrXFo" alt="" width="1" height="1" align="bottom" />

URL: <a href="http://feedproxy.google.com/%7Er/Makeuseof/%7E3/X7l7fwwrXFo/">http://feedproxy.google.com/~r/Makeuseof/~3/X7l7fwwrXFo/<h6 class="zemanta-related-title">Related articles by Zemanta <ul class="zemanta-article-ul"> <li class="zemanta-article-ul-li"><a href="http://crenk.com/stiqr-free-wordpress-plugin-that-lets-you-customize-your-wordpress-blog-without-coding/">Stiqr: Free WordPress Plugin That Lets You Customize Your WordPress Blog Without Coding (crenk.com) <li class="zemanta-article-ul-li"><a href="http://www.bloggingot.com/social-media-marketing/add-stickies-to-your-blog-with-stigr/">Add Stickies To Your Blog With Stiqr (bloggingot.com) <li class="zemanta-article-ul-li"><a href="http://www.appscout.com/2010/03/stiqr_allows_you_to_add_sticke.php">Stiqr Allows You to Add Stickers and Widgets to Your Web Page (appscout.com) <li class="zemanta-article-ul-li"><a href="http://crenk.com/free-visual-theme-editor-for-wordpress/">Free Visual Theme Editor for WordPress (crenk.com) <div class="zemanta-pixie"><a class="zemanta-pixie-a" title="Reblog this post [with Zemanta]" href="http://reblog.zemanta.com/zemified/0ebf2b71-69a9-482f-b877-38fa979b5aab/"><img class="zemanta-pixie-img" src="http://blog.amit-agarwal.co.in/wp-content/uploads/2010/08/reblog_b69.png" alt="Reblog this post [with Zemanta]" /><span class="zem-script more-related more-info pretty-attribution paragraph-reblog">


author

Authored By Amit Agarwal

Amit Agarwal, Linux and Photography are my hobbies.Creative Commons Attribution 4.0 International License.

We notice you're using an adblocker. If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!

I've whitelisted your website.

Not now
This website uses cookies to ensure you get the best experience on our website. Learn more Got it