How To Modify Your WordPress Theme Via Browser Using Stiqr

00_Stiqr_logo.jpgOrdinary 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 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 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.

Tagged:

Jeffry Thurana

An Indonesian writer, self-proclaimed musician, and part time architect; who wants to make a world a better place one post at a time via his blog SuperSubConscious.

Similar Stuff

The comments were closed because the article is more than 90 days old.

If you have any questions related to stuff mentioned in the article or need help with any computer issue, just ask it on MakeUseOf Answers.

  • http://pceasies.com pceasies

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

    • http://www.supersubconscious.com Jeffry Thurana

      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?

      • http://www.kameleoon.com Jean-Noel | Kameleoon

        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.

        • http://www.stiqr.com jae

          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.

  • http://titles.ir/ Hesam

    But does not open site Stiqr

  • http://timmyjohnboy.com Tim Lenahan

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

    • http://www.supersubconscious.com Jeffry Thurana

      As far as I observed, no.

  • timmyjohnboy

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

  • Josh Hansen

    Wow, Stiqr is friggin amazing.

  • http://www.twentieslife.com Ibrahim | TwentiesLife.com

    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…

    • http://www.stiqr.com jae

      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

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

        • http://www.kameleoon.com Jean-Noel | Kameleoon

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

          Some content inside…

  • http://www.kameleoon.com Jean-Noel

    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.

  • http://mjrider.com Matt Rider

    it doen’t yet work with posterous…thats the site that needs it