How to Easily Add WordPress Sidebars to Your Theme

As a WordPress user and developer you are likely to come a across a situation where you need to add additional custom sidebars.

Adding custom sidebars to your WordPress is relatively simple and can be achieved in a few simple steps.

Step 1 – Determine the needs

First you’ll need to determine the number of sidebars you’ll need and their function on your theme.

Step 2 – Add sidebars to theme.

Adding sidebars will require you to edit your themes functions.php file, so before beginning you should make a backup of your functions.php file.

Within the functions.php file you can register your sidebar(s) using the register_sidebar function :
* for the purposes of this blog the theme name is “Custom Theme Name” (“customthemename”)

function customthemename _widgets_init() {
register_sidebar( array(
'id'          => 'my-custom-sidebar',
'name'        => __( 'Top Menu', 'customthemename' ),
'description' => __( 'This sidebar is located above the age logo.', 'customthemename'),
) );

register_sidebar( array(
'id'          => 'my-custom-sidebar-2',
'name'        => __( Side  Menu', 'customthemename' ),
'description' => __( 'This sidebar is located on the side.', 'customthemename'),
) );

}

Using “id” you can give the sidebar a unique name, which will later be used to call the sidebar. Using “name” you can name the sidebar, the name will appear in your “Widgets” page  within your WordPress Dashboard; following the name of the sidebar is the name of the theme.
Using “description” you can set the descriptive text that will appear underneath the sidebar name in your Widgets page. (see finished example below)

Once you’ve registered the sidebar(s) within your functions.php page you can upload the revised page.

Step 3 – Add sidebars to your theme template

A. Make sure your sidebars are active within your site and page templates (index.php, page.php, etc.) using:

<?php get_sidebar();?>

B. Add your custom sidebar names (my-custom-sidebar) to your sidebar.php page.

<?php if ( is_active_sidebar( ' my-custom-sidebar ' ) ) : ?>
<div id="sidebar" class="widget-area" role="complementary">

<?php dynamic_sidebar( ' my-custom-sidebar ' ); ?>

</div>

<?php endif; ?>

Step 4 – Build your sidebar(s)

Creating custom sidebars and adding them to widgets
Once you’ve added your sidebar(s) to your theme template and pages (and uploaded to your web server) you can begin customizing the sidebars through your WordPress Dashboard.

Within your Widgets page you should now see your custom sidebars, described by the Name set  in your functions.php page.

And that’s it!

responsivetest

5 Great Resources for Testing Mobile Websites and Responsive Design

As each day goes by the world gets their hands on more and more mobile internet devices; which means the demand for mobile web solutions will increase. By 2015 more data will be transferred and viewed by smart phones than actual PCs (source).

These days most major corporations have either provided a separate mobile website to serve their mobile audience or have provided a responsive web solution to cater to the variety of screen sizes.

As a web developer who is tasked with developing a mobile web solution it’s important to have as many testing tools as possible. Having multiple mobile testing tools available is never a bad thing.

Below are some 5 tools I’ve found that can help in mobile web development testing; not only are these good tools for phones but for tablets and desktop resolutions as well.

Mobilizer

Mobilizer

Mobilizer is a great (and free) program that allows you to preview a website online and locally. The software has built-in previews for the iPhone (4 & 5), Samsung Galaxy S3, Nokia Lumia 920, Palm Pre, Blackberry Storm and HTC Evo.

This is the only tool on the list that will allow you to view a website locally versus strictly online.

Matt Kersley

MattKersley

Professional web developer Matt Kersley has provided a simple and easy way to preview websites for not only handheld mobile devices but for tablets as well. His responsive testing tool gives the user an option for specific widths (240, 320, 480, 768, 1024) with fixed height or specific devices sizes (with respective height).

Resize My Browser

ResizeMyBrowser

ResizeMyBroswer is a wonderful tool if you have specific devices sizes in mind. Devices sizes for iPhones, Netbooks, MacBooks and iPads are opened in new browser window. This online tool also allows you to create your own preset, in case you want to preview a specific size. You can choose to include or exclude the toolbar and scrollbar in the preset size.

Responsive Test

ResponsiveTest

The folks responsible for ResponsiveTest.net have developed a way to test websites using the most popular preset device sizes and resolutions. Included in their presets are portrait and landscape sizes for iPhone, Android, “Crappy Android” (240px wide), iPad, Kindle and high resolution screens. The previews from this tool are a bit unique from some of the other online responsive tools as they provide a view of the device and can be scrolled.

Screenqueri

Screenqueri

Screenqueri is a incredibly useful tool that provides a variety of device previews, from the iPhone to the Amazon Kindle Fire. It gives the user the ability to rotate the display size, from a portrait view to landscape view. It also provides the ability to manually re-size the screen size, from 320px up to 2500px, which can be helpful when trying to develop websites with large screens in mind as well.

If you’ve used other responsive testing tools please share in the comments section; or let me know your thoughts on the tools in this list.

So You’re Looking for a Web Designer

So you’re looking for a web designer? Web designers can be found relatively easy. There are thousands and thousands of web designers and companies throughout the world.

Depending on your preference, your search for a web designer will vary from a simple web search, to asking your colleagues, to posting on a job board/freelance website.

If you’re a novice and don’t know where to even start, you may just do a simple web search for a designer/developer. This is often the most preferred choice in finding one. If you prefer a different method of finding a designer, it will still lead to the same question: What am I looking for?

What to look for in a designer?

There are several things to keep in mind when searching for a web designer. Sometimes you can be drawn to a company because of their fees, their work or first impression. Below are some of the things you should never overlook.

Location

You should pay attention to the location of the web designer or web design Company. Using a local designer over a non-local has its obvious advantages, including:

  • In-person meeting
  • Similar working hours/availability
  • Overall higher sense of assurance

Continue reading

Creative Footer Designs for Inspiration

Footers can come in all different shapes, sizes and designs. Below are a list of several websites that feature creatively constructed footers. These footers are artistically creative, structurally creative or both. Enjoy!

Creativepayne

creativepayne.com

Link

Puneet Sakhuja

puneetsakhuja.com/

Link

Freelenz

freelenz.at

Link

AMT studios

amtstudios.nl

Link
Continue reading

WordPress Basics 101: Creating Custom Pages

WordPress is based on the use of templates for specific purposes. There are templates for different types of situations, like a blog posting, a regular page, a 404 error or to display blog postings for a certain category. The default templates are “single.php”, “page.php”, “search.php”, “author.php”, “404.php”, “category.php”, “archive.php” and “index.php”. There is a hierarchy to all these template pages which follow an order depending on what the visitor wants to see.

Whenever you are in the WordPress admin and you’re creating or editing a page or blog post, you will see what template is currently being used:

Selecting WordPress Default Template

The “Default” will either use the “single.php” template page for posts or will use “page.php” for pages (WordPress 3.0+). You can add your own template relatively easy, below are the steps to creating a custom template.

  1. Create a template file
  2. Customize your template file
  3. Apply your template to the desired page

Continue reading

What a Client Must Include in a Design Agreement

It doesn’t matter if you’re a person, small company or large company, when looking for a new logo design, print design or website there are items a designer must include in your design contract. You’re design project can vary from a small print design job to a large complex website. This list compiled will include items the designer must include in your agreement. If these items are not in your design agreement, make sure your designer includes them. The designer will always look to protect themselves, as they should, and so should you.

Displeasure With A Contract

 

Continue reading

Items a Designer Must Include in a Contract

I’m sure as a freelancer we’ve all said to ourselves at one point, probably in the middle of a project, “why didn’t I include that in the contract?” As designers we know the importance of getting agreements in writing, for the benefit of both the designer and the client.

This is going to be a two part series, first, what the designer must include in a design contract and another write-up on what a client must include in a design contract.
Carefully Reviewing A Contract

Nothing can teach us what should be in a contract more than experience. Unfortunately some of us have had to learn the hard way what the “musts” are in a design agreement. Below are some of the items that are absolute musts for designers to protect themselves financially, legally and just a pain in the…well you get the idea. Continue reading

Top 10 Links for CSS3 Resources

If you haven’t already, you soon will start using CSS3 and HTML5 in your web development. Below is a list I’ve compiled of the most popular postings, tips or tutorials on using CSS3.

CSS3info

CSS3 Info

“Everything you need to know about CSS3”
Link

 

Continue reading