Pinterest Stumbleupon Whatsapp

00_Stiqr_logo.jpgOrdinary self-hosted WordPress How To Setup A Self-hosted Wordpress Blog for Free How To Setup A Self-hosted Wordpress Blog for Free Read More 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 one of the customizable themes Design Your Own Wordpress Theme Easily With Constructor Design Your Own Wordpress Theme Easily With Constructor Read More 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 HTML, PHP and CSS coding.

But that’s not the case anymore. I recently stumbled across a WordPress theme editor plugin called Stiqr – still in beta as every other Web 2.0 service is – which can help ordinary web users to become a “skillful” web designer. If you can 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.

Wordpress theme editor plugin

And everything is done without the need for a standalone web builder application, or the coding knowledge. All you need is a browser.

Wordpress theme editor plugin


Setting Up The Stage

If you’ve always wanted to design your own 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“.

Wordpress theme editor

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.

wordpress theme editor

Armed with the code, login to your WordPress.

wordpress editor

Then navigate to the right sidebar, and click “Editor” under the “Appearance” menu.

wordpress theme editor

Within the WordPress theme editor plugin, find the “Footer (footer.php)” and click on the link to edit.

wordpress blog editor

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

wordpress blog editor

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.

wordpress blog editor

That concludes the preparation stage.

Turn Your WordPress Into A Sticker Scrapbook

On the front page of your WordPress blog, press the key combination of “Shift + F2” to start Stiqr. As a first time Stiqr user, you will have to register first. Start by entering your email address and click “OK“.

wysiwyg wordpress theme editor

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

wysiwyg wordpress theme editor

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.

wysiwyg wordpress theme editor

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.

09 Login to Edit.jpg

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.

10 Start to Build A Blog.jpg

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.

  1. Matt Rider
    March 31, 2010 at 4:23 pm

    it doen't yet work with posterous...thats the site that needs it

  2. Jean-Noel
    March 31, 2010 at 10:24 am

    This is a bit similar to our own just released product, Kameleoon. We focus on design, so Kameleoon allows you to redesign your existing WordPress (or any website) theme directly from your browser. We have excellent design features.

    We don't (yet) add content like stiqr does though. So the principle is the same, but the goals are quite different.

  3. Ibrahim |
    March 31, 2010 at 6:43 am

    I guess you would use this to add things to your wordpress theme, but you aren't really modifying it. You can't change the width of your header, or change the text in your footer. You aren't really modifying the theme itself, just adding things on top of it...

    • jae
      March 31, 2010 at 8:34 pm

      hello ibrahim, this is actually possible if you were to add a class called "stiqr" on the theme's elements. but changing the text in a footer, i would recommend not doing this, i believe that may hurt seo performance so we've disallowed editing the content. but i can see that perhaps for some folks, this may be ideal.

      • noobdesigner
        April 1, 2010 at 9:43 am

        Sorry, newbie question here: how do you add a class called "stiqr" on the theme elements?

        • Jean-Noel | Kameleoon
          April 1, 2010 at 9:54 am

          You edit the theme template file and add class="stiqr" to the relevant HTML elements, eg:

          Some content inside...

  4. Josh Hansen
    March 30, 2010 at 1:01 pm

    Wow, Stiqr is friggin amazing.

  5. timmyjohnboy
    March 30, 2010 at 8:18 pm

    Does it leave a watermark or footer link attributing the use of the service?

  6. Hesam
    March 30, 2010 at 10:16 am

    But does not open site Stiqr

  7. pceasies
    March 30, 2010 at 9:44 am

    Any info on the quality of code it produces? Optimized? Or just a mess

    • Jeffry Thurana
      March 30, 2010 at 1:54 pm

      I've just checked one Stiqr showcase site using Firebug, they add one item container for each 'sticker'. I'm not that proficient with codes, so I don't know whether they are a mess or not.

      Anybody could share expert opinion on this?

      • Jean-Noel | Kameleoon
        March 31, 2010 at 10:26 am

        Yes, they add one div container with position: absolute to your site. That's not a mess if done right, and there is not really any other way of doing this. However, keep in mind that the content you add via stiqr will not be indexed by Google (although I think they are working on a solution to this). That was one of the reasons why we decided to focus only on design.

        • jae
          March 31, 2010 at 8:30 pm

          correct. and the type of code it produces is as lean as it gets, just a styled div with pure content. it's unlike dreameaver/frontpage for those who are worried about it.

Leave a Reply

Your email address will not be published. Required fields are marked *