Tutorials


Oct
22

Working with WordPress

Posted by Hayley in Tutorials

We’ve had many requests from clients on how to use their Wordpress sites. Wordpress is an excellent blogging platform, but it can also be daunting to new users.

The main thing you want to do with your Wordpress site is make blog posts. Below is both simple and more detailed information about the process of creating a blog post:

wordpress example

The Basics of Creating/Editing & Publishing a Blog Post

  • First sign in using WordPress Login page. ex. (www.examplesite.com/blog/wp-admin)
  • Click the “Posts” tab located within the left side navigation.
  • Click the “Add New” link located both at the top and left hand side of the page.
  • Add blog title where it says “Enter title here”.
  • Add some content!
  • The content box has many editing functions similar to those you would see in Microsoft Word. You can bolden, italicize, add links and more!
  • If you plan to write blog posts on a variety of topics creating categories is a great way to keep your posts organized.
  • Add a category by clicking the “Add New Category” link located in the “Categories” section to the right of the content area.
  • If you’ve completed your blog post but don’t want to publish it right away you have the option to save as a “Draft”.
  • To save as a draft click the “Save Draft” button located to the left of the page under the “Publish” section.
  • If you’re ready for the word to see your words of wisdom, click Publish!

Need more details? No Problem…

Blog Post Title

This is the title of your post. You can use any words or phrases but  its best to avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hypens/dashes, and other typical symbols in the post.

Content Editing Area

The blank box where you enter your writing, links, links to images, and any information you want to displayed in the content of the post.

Preview button

Allows you to view the post before officially publishing it. This is located under the “Publish” section to the right of the “Save Draft” button.

Publish Section

Contains buttons that control the state of your post. The main states are Published, Pending Review, and Draft. A Published status means the post has been published on your blog for all to see. Pending Review means the draft is waiting for review by an editor prior to publication. Draft means the post has not been published and remains a draft for you. If you select a specific publish status and click the update post or Publish button, that status is applied to the post. For example, to save a post in the Pending Review status, select Pending Review from the Publish Status drop-down box, and click Save As Pending. (You will see all posts organized by status by going to Posts > Edit). To schedule a post for publication on a future time or date, click “Edit” in the Publish area next to the words “Publish immediately”. You can also change the publish date to a date in the past to back-date posts. Change the settings to the desired time and date. You must also hit the “Publish” button when you have completed the post to publish at the desired time and date.

Visibility

This determines how your post appears to the world. Public posts will be visible by all website visitors once published. Password Protected posts are published to all, but visitors must know the password to view the post content. Private posts are visible only to you (and to other editors or admins within your site)

Save Draft

Allows you to save your post as a draft / pending review rather than immediately publishing it. To return to your drafts later, visit Posts – Edit in the menu bar, then select your post from the list.

Publish

Publishes your post on the site. You can edit the time when the post is published by clicking the Edit link above the Publish button and specifying the time you want the post to be published. By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Post Tags

Refers to micro-categories for your blog. Posts with similar tags are linked together when a user clicks one of the tags. Tags have to be enabled with the right code in your theme for them to appear in your post. Add new tags to the post by typing the tag into the box and clicking “Add”.

Categories

Categories refers to the general topic the post can be classified in. Generally, bloggers have 7-10 categories for their content. Readers can browse specific categories to see all posts in the category. To add a new category, click the “+Add New Category” link in this section. You can manage your categories by going to” Posts” >” Categories”.

Discussion Options to enable interactivity and notification of your posts. This section hosts two check boxes: Allow Comments on this post and Allow trackbacks and pingbacks on this post. If Allowing Comments is unchecked, no one can post comments to this particular post. If Allowing Pings is unchecked, no one can post pingbacks or trackbacks to this particular post.

Password Protect This Post

To password protect a post, click “Edit” next to Visibility in the Publish section to the top right, then click “Password Protected”, click Ok, and enter a password. Then click OK. Note – Editor and Admin users can see password protected or private posts in the edit view without knowing the password.

Post Author

Post Author refers to a list of all blog authors you can select from to attribute as the post author. This section only shows if you have multiple users with authoring rights in your blog. To view your list of users, see “Users” tab on the far right.

WPScreencasts also describes this process, except using a video podcast, so if you are more of a visual learner, the video below is for you:

Post to Twitter

Mar
9

Using Picnik to Resize Images Online

Posted by Trent in Tutorials

We have had several clients ask us how to properly resize and optimize images for use on their websites. In most cases, our clients do not have access to costly software like Photoshop or Fireworks. Thank goodness for Picnik – www.picnik.com, an online system (just acquired by Google) that gives users the ability to edit digital photos and images in their browser, without having to purchase or download complicated software.  We’ve compiled detailed step by step instructions to help our clients (and anyone that might be interested) resize and optimize images so that they are suitable for the web.

Suitable web images should be:

  • Small in file size, allowing for quick download
  • Correct dimensions (width and height) to fit properly on the page
  • JPG or GIF format

Step 1

Visit www.picnik.com.  It’s not mandatory to sign up for a free account to use the system, but we recommend it.  Becoming a member unlocks additional features like unlimited access to all your uploaded photos and edits.  Don’t worry, registration is quick and easy.

Step 2

Find and click the “upload photos” button.


Step 3

A window will pop up.  Browse through your computer and find the image you wish to resize and open it.  This will upload the image.

Step 4

Your chosen image will now be displayed in the editing window.  You will the notice the tool menu located above the image.  For the sake of keeping things simple, we are only interested in the clicking resize button.

Step 5

Picnik does a great job of giving on-screen instructions.  Simply enter the desired dimensions (width or height) in pixels.  The software will ensure that the image stays proportional.  We recommend that you avoid making images larger with this software, doing so will reduce the quality of the image, making it muddy and blurry.

Step 6

Click the “Save and Share” button when satisfied.  Let the software do it’s magic, and when prompted click the “Save Image” button.

Conclusion

We have only scratched the surface of what you can accomplish with this amazing software.  As you spend more time using the software you will be come more comfortable with it’s features.  Explore and have fun!


Post to Twitter

Jan
16

Registering a Domain Name with GoDaddy

Posted by Trent in Tutorials

When initially meeting with clients, one of the first questions we ask is “Do you have a domain name registered?”. More often than not they have. But for those clients that need help securing a domain, we’ve written a post with easy step by step instructions.

We recommend using GoDaddy’s services for a number of reasons.

  • They allow you to register nearly every domain extension (.com, .ca, .net, .org, .tv etc)
  • They offer some of the cheapest domain registration prices on the web
  • Domains can be set to renew automatically every year
  • They provide 24/7 phone support

Step 1

Step 2

  • Displayed right on the front page you’ll see a section below the green menu you that says “Start your domain search here…”  Type your ideal domain name in the field and choose your desired domain extension (.com, .ca, ect).

Step 3

  • The next page will display whether the domain with your desired extension is available or not.
  • Ensure that the check box to the left of the requested domain is checked off and click the “add” button.  This will add the domain to your shopping cart.
  • It’s a good idea to register the most common domain extensions if possible.  This will prevent your competitor or cyber squatters from registering these domains.  For example when registering yourcompany.com, you should also consider registering yourcompany.ca and yourcompany.net.
  • If your desired domain is not available you may search for alternative domains using the “Search for another domain” feature.
  • Once you have added your requested domains to the shopping cart click the orange “Continue to registration” button.

Step 4

  • Once you’ve landed on the Domain Registration Information page you will be asked create a new account.  Simply complete the form and click the “Continue” button.
  • Please ensure that you provide a permanent email address as this is how Godaddy will contact you to supply receipts, password requests and renewal notices.

Step 5

  • Once you’ve landed on the Registration and Checkout Options page, scroll right down to the bottom to section 4 Select Checkout Preference. Select the “No thanks. I’m ready to checkout” option.

Step 6

  • You’ve made it to the Secure Checkout page.   In step 1 you are able to review your shopping cart and choose the length of the domain registration.  We recommend that you register for at least 3 years.  This is the best way to ensure that you have control over your domain for an extended period of time.
  • Optional (but well worth it!): You can save money by using a promotional code found on http://www.fatwallet.com/ Choose the applicable code, enter into the Promo field and click the orange “Apply Code” button.
  • Godaddy will automatically renew your domains as long as the credit card you have on file is valid.  It’s important to review all emails that Godaddy sends to ensure that your domain is being properly renewed.  If your credit card has recently expired then your domain name will not be renewed.
  • Next is the Payment Method section.  Select your preferred method.
  • Finally you made it to the Registration Agreement.  Read and agree to the Universal Terms of Service and Domain Registration Agreements.
  • Click the orange “Continue to Checkout” button.

Step 7

  • The Secure Payment page is straight forward.  Fill in all the fields and click the orange “Place Your Order” button.  You will be directed to a confirmation page and will receive a receipt for your purchase via email.  Your email will contain your Godaddy login ID and password.  Please print this email off and keep in a safe place.  We will will need this information to point your domain to our web server.
  • Congratulation, you are the proud owner of a domain (or domains)!

As always, we are only an email or phone call away, so if you have any issues registering your domain we’d be be happy to help.

Post to Twitter

Feb
3

CSS: alternative to clearing floats

Posted by Ryan in Tutorials

The problem:

When floating multiple divs within a container you will come across a very strange occurance… The container (outlined in red for the example) will not continue to extend down around the elements which are inside of it. In this case the container has a background-color of #fff, which means that the area underneath the right-column should also be white.

View example.

To fix this problem the most common solution is using the clear property in an invisible div or br tag. This method works very well as long as you can keep track of your divs and you are properly clearing only what is needed. The problem that I have with this method is that it adds that little bit of extra markup to the code, when there is a much simpler and cleaner way to achieve the same result.

The fix:


#wrapper {
text-align:center;
width:800px;
margin:0 auto;
overflow:hidden; /* Reminds the container to stretch */
background:#fff;
border:3px solid #f00;
}

View example.

By setting the overflow value to hidden you are basically giving the element a friendly reminder that it should be doing something. You can also use the scroll and auto property to achieve this effect. However, using scroll will result in having scrollbars whether you want them or not. I find this method a lot easier to implement and maintain than using clears, and it helps to keep your source nice and clean.

Post to Twitter

Contact Form
Phone: 306 546 2118
OH! Media (CAN)

Regina Office
195-1621 Albert St.
Regina, Saskatchewan
S4P 2S5