Tag: Web Devlopment

Why I use WordPress as CMS?

Posted on by ioadmin

If you think WordPress is yet another blogging platform, take a quick look at other pages of iogoos.com (right from the homepage). Do you really think we could do this with  “Just-Another-Blogging-Software”? Absolutely not!!

Custom Pages, Custom Widgets, Photo Galleries, Portfolio, eCommerce! What, out of these, and even more hasn’t been set up using WordPress.

Only recently, I updated my portfolio with more websites that I had finished, which were not under non-disclosure policy. After adding these projects in my portfolio, I realized that in accomplishing 90% of my work, WordPress plays the role of a CMS. With all the work done so far I am amazed by just how much of its capability I have discovered and how much of it is still unknown to me. Here are a few things that my clients ask when I recommend using WordPress, even for static websites, and what I’ve to say to back my recommendation.

Is it easy to use?

It is The Most Robust and Feature-Filled Platform, which is not only easy to use, but also, very much user friendly. So far all my clients are really happy with the decision to use WordPress as a backend. Moreover, WordPress.tv has made our lives much easier. I refer my clients to this website to learn the features and backend functionality while I am busy creating the best solutions for their requirements.

I need a blog as well…

I guess everyone has realized the value of blogging for their personal and professional web presence by now and most of my clients ask for a blogging platform with a unique and custom website design. It’s really easy to create a few custom pages within WordPress, rather than, creating a WordPress theme that matches the website design. And its really easy to embed WordPress features on these static web pages.

What about Search Engine Optimization?

I am pretty sure you are not new to this term and would want your website to be listed in top search results. With WordPress, you can use plugins like All in One SEO Pack, just to name some, that does most of the work without user intervention. SEO is a wide topic and there’s a lot that needs to be done to achieve good search engine rankings. However, a WordPress installation with a few plugins can help you get there without much hard work. You might want to check a few posts I have written on search engine optimization.

What all WordPress can do?

Honestly, I can’t deny that after using WordPress I haven’t even cared to search for any other CMS. WordPress is an amazing platform which can be customized to create Personal websites, Portfolio, e-Commerce, Galleries and Photo Blogs, Magazine or News websites, Article Libraries and a lot more. If you are comfortable with custom functions and template tags you can actually do wonders with just a single custom WordPress theme.

I don’t know programming?

While creating websites for my clients, I make sure they don’t have to spend their valuable time learning xHTML/CSS to update their websites. I have taken WordPress customization to next level where it provides a separate section in admin area to update the front end of our custom themes. It also has WYSIWYG capabilities where you can update and stylize the content which is not a part of WordPress post or page.

Moreover, these custom functions don’t save any data in core WordPress database tables (wp_options) so there’s no chance it won’t work with any other plugins and features.

Here’s a screenshot of Custom Theme Options I provide to make my client’s life a bit easier.

Theme settings

That’s not all, to add a few more features in the list…

  • WordPress is Free and Opensource
  • WordPress is easy to install and upgrade
  • WordPress is standard compliant
  • WordPress is Popular (CNET, Ford, ZDNET and various other popular sites has used WordPress as a CMS)
  • Free support from a vibrant and amazing community of developers and contributors
  • Huge amount of documentation is available
  • Plugins are available for almost everything you can think of

I bet no other CMS can compete with this master piece. If you are using WordPress as CMS please drop your website links in comments. Don’t try to spam as a very powerful spam protection plugin (Akismet) comes with its default installation πŸ˜€

contact us

Check Our Portfolio

How to create a category-based search box with CSS and jQuery

Posted on by ioadmin

There are a few times when we want our website visitors to search content in just one category and not the whole website. Today I am sharing a simple but effective UI trick to create a category-based search box with CSS and jQuery.

HTML

<div >
  <input type=text value="" placeholder="search:" />
  <div >
   <label><input type=radio name=filter value="value" /> Category One</label>
   <label><input type=radio name=filter value="value" /> Category Two</label>
   <label><input type=radio name=filter value="value" /> Category Three</label>
   <label><input type=radio name=filter value="value" /> Category Four</label>
   <label><input type=radio name=filter value="value" /> Category Five</label>
   <label><input type=radio name=filter value="value" /> Category Six</label>
  </div>
</div>

Now let’s just add some styles to out HTML code above.

CSS

#demo {
  width: 600px;
  margin: 100px auto 0 auto;
}
#demo .search-box {
  width: 100%;
  position: relative;
}
#demo .search-box input[type="text"] {
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 12pt;
  margin: 0px;
}
#demo .search-box input[type="text"]:focus {
  box-shadow: none !important;
  outline: none !important;
}
#demo .search-box .search-filters {
  display: none;
  width: 100%;
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-top: 0px;
}
#demo .search-box .search-filters:after {
  content: "";
  display: table;
}
#demo .search-box .search-filters label {
  margin-bottom: 7px;
  font-size: 13px;
  display: inline-block;
  width: 50%;
  float: left;
}

You can use the above CSS or create your own styles by changing the backgrounds, colors etc.

Now let’s add the jQuery magic and make this piece of code look great

jQuery

Make sure you call the jQuery script on the page by adding this code on the page.

<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.0.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" width=20 height=20 alt="<script>" title="<script>" />
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-migrate-1.2.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" width=20 height=20 alt="<script>" title="<script>" /><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>
jQuery(document).ready(function($){
  $('.search-box input[type="text"]').focus(function(){
    $('.search-filters').slideToggle();
  });
  $('.search-filters input[type="radio"]').on('click', function(){
    var placeholder_text = $(this).closest('label').text();
    $('.search-input').attr('placeholder', 'search: '+placeholder_text);
    $('.search-filters').slideToggle();
  });
});<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>
contact us

Like this code.

Our Services

Scroll Image within a DIV tag with CSS

Posted on by ioadmin

How to Scroll Image within a DIV tag with CSS. Preview and download the code from codepen.

While your hunt for pre-built themes and templates, you must have seen this scroll effect on demo pages.

I’ve been working on something where I needed this functionality and I didn’t want to use Javascript for this so I created this effect in pure CSS.

HTML Code

<div class="image-scroll">
    &nbsp;
</div>

CSS Code

.image-scroll {
  width: 200px;
  height: 100px;
  background-image: url('IMG-URL-HERE')"; // or specify in HTML styles.
  background-size: 100%;
  background-position-x: 0;
  background-repeat: no-repeat;
  transition: all 2s ease;
  &:hover {
    background-position-y: 100%;
  }
}

If you have created this effect with some other css technique, please feel free to share the link in the comments.

WordPress Developer

Feel free to Contact Us.

Enquiry Now

When We Work Together

We can create something incredible

arrow
HQ INDIA
HQ INDIA
C-31, Milap Nagar,
Uttam Nagar, New Delhi,
Delhi 110059
USA
USA
6715 Backlick Rd Suite 202
Springfield,
VA 22150, USA
AUSTRALIA
AUSTRALIA
2/51, Lane Cres,
Reservoir, VIC
3037, Australia
CANADA
CANADA
61 Payzant Bog Road, Falmouth, NS, B0P 1P0, CANADA
UK
UK
3rd Floor, 131 City Road, London, EC1V 2NX, United Kingdom
UAE
UAE
Boutik Mall, Al Reem Island - Abu Dhabi, UAE
X

Let Us Call You Back

  • India+91
  • United States+1
  • United Arab Emirates+971

Your phone number is kept confidential
and not shared with others.

×

Start Your Project