www.reflectingthedesigner.com

Wordpress Tips and Tricks

As I was working on redesigning theStock411 Wordpress blog, I implemented two fantastic Wordpress plugins. One of these plugins is WP-Sticky. I’ve known about this plugin for a while, but had never used it. It’s a nice simple way to keep one post at the top of your blog at all times. Now, there are a couple of items to note if you are using this plugin after creating your theme in Artisteer: You must change a tiny bit of php if you want to hide the date. I found a couple of forums that had parts of the following information:

1. Go to your Main Index PHP and find the following code:
   <?php if (!is_page()): ?><?php ob_start(); ?><img src=”<?php bloginfo(‘template_url’); ?>/images/PostDateIcon.png” width=”17″ height=”18″ alt=”" />
   <?php the_time(__(‘F jS, Y’, ‘kubrick’)) ?><?php }?>
2. After <?php if (!is_page()): ?><?php ob_start(); ?>, add the following:
   <?php if (!is_announcement() ) { ?>
3. This is basically telling the theme not to show up the date if the post is a sticky post listed as an announcement specifically. This is important, because while you can choose “no date” in the WP-Sticky setting, the icon will still appear. I’m sure you could just hide the icon, and put this in front of it instead, then you would still get your little announcement banner underneath the heading without the other icon elements. However, I chose to just have a header with nothing underneath at all, so I used this method.
4. Just one more step. Because Artisteer lists the date as time, you’ll need to change that tiny part as well. This is what you’ll need to do. In that same bit of code you were just working with, change <?php the_time to <?php the_date and you are all set.

Another note on WP-Sticky. You must choose the announcement radio button on the dashboard of the post you want to be at the top of the page. If you just choose sticky, it will remain on the front page, but not necessarily the top.

The second plugin I’d like to highlight today is Custom Post Background. It allows you to add an image behind the text of your post, which is amazingly helpful. If you’ve been trying to do this by implementing a table into your post, you know how frustrating it is! This plugin solves the problem for you sooooo easily.

Below is an example of how I used this plugin to style the sticky post for theSTOCK411.

My client wanted this sticky post to stand out from the others so it looked more like a part of the main design rather than just a post. Of course, because of the information listed, he also needed to be able to edit it on a monthly basis, so just inserting an image into the post by itself was out of the question.

So, I created a background image in a png format that matched the design I created for the rest of the site. I then used the handy plugin to insert it into the post. I did have to do a little styling to the text in order to give the text inside of the image some padding rather than being pushed right up against the sides of the image. To do this, I simply added the following code in the html part of the post editor:

<p style=”text-align: center; padding-top: 20px; padding-right: 10px; padding-left: 10px;”><strong><span style=”color: #ffffff;”>my text was inserted here and then closed with</span></strong></p>

I also made sure to center the three images below the text and add necessary margin space to them so that the entire background image showed up correctly, and so that they were spaced evenly in the post. The nice part about this is that not only do Search Engines pick up all of the text in the post, but you can also easily edit the post as desired without having to create a whole new graphic.

One more thing to remember when using this plugin: You’ll need size your image appropriately in proportion to the amount of text you want to add. the image will only appear as far down as the text goes, so if you don’t have much text your image will look cut off abruptly.

SPECIAL NOTE: if you plan to copy and paste any code from this post, please make sure to do so using a text editor and change the direction of the quotation marks.

Hope this information was helpful, and please comment if you have any additional tips or questions.

Well, I’ve been very busy on some projects recently as well as other “life” stuff that have kept me from being able to post as much as I’d like to. I just completed a full Wordpress website for a company that I did a WP blog for several months ago. They wanted their whole site transformed and consolidated into one Wordpress Site. It was a huge process as I had to set up Wordpress in their current hosting location, transfer the old blog over to it, and completely design and add content to their site from top to bottom. A huge thanks to a couple of helpful posts from Digital Raindrops on how to successfully add more widget spaces going horizontally across the bottom of the page and still in keeping with the format of the other widgets as far as design. Widget Logic, a Wordpress Plugin, was also a huge part of this site so that almost every page displayed different widgets that were applicable to that page. I also used a separate page template for the home page, but honestly I had to dig around through multiple posts online and work out things myself before getting the desired effect so no kudos to anyone on that part, although Wordpress does have some helpful articles on the subject. The key to page templates is to properly link to new css that you create for that template. Contact me if you are interested in taking a look at that site.

Other projects I’ve been working on is the logo and branding for a local church (still working on that, and will post pictures once complete.) I also just finished doing the blog redesign for My Skin Concierge, Ava which I like to describe as a Victorian Pink Explosion. It’s the ultimate “girly-girl” site, but why not with a topic like skincare? I still need to do a couple of little things on that one, and Ava will be organizing and structuring her menu items how she wants them when she has time.

I told one of the visitors to this site that I’d work on a matching WP theme, Twitter, and YouTube Channel for them, but after that I’m going to be stopping for a little while so I can get caught up on the rest of life. Thanks for your patience!

There are several new prospects on the horizon for my husband and I that require my utmost attention right now, so I’ll be taking a break from any new design projects for a while. You can feel free to ask me questions, but I will not be able to take on any new customers until further notice. I have a couple of projects to finish up for some current customers, and I’ll keep you posted when I’m ready to start-up in full force again. I will still be writing the occasional blog post, and you can always feel free to comment on previous posts or ask a design question.

Take care!

I was just browsing through some new twitter followers blogs, and I couldn’t help but notice some well designed themes, and some very poorly designed Wordpress and Blogger themes. Most of these have great content, but a lot don’t really make you want to stay on their site very long because they are either not friendly on the eyes or they are difficult to navigate through.

Here are some simple tips to help you make your blog or site keep more viewers. (Note: not all of these tips are even used on my own site, but should be.

Content:

• As everyone knows, content is king in the web world, and if people don’t immediately know what your site is about at first glance, you’ve already shot yourself in the foot. Make sure that your title is clearly visible, easy to find and read, and clearly communicates the purpose of your site.
• SEO: Search Engine Optimization is very important.
  
  1. While it’s great to have a beautiful title, make sure to also have text that search engines can read (whether it’s visible to the human eye or not) so that people will be able to find your site.
  2. If you are using Wordpress, I recommend checking out the Platinum SEO Pluggin.
  3. Make sure to put plenty of tags in your posts, but make them applicable to your content and not too random.You want people to come who are really interested in what you have to say or they won’t stay.
• Displaying Ads: Almost everyone wants to display ads, but most blogs are overpowered by them so that not only is it difficult to see what your site is all about, but it also just turns people away.
  
  1. Put only ads on a page that apply to that topic, and limit the number of ads to just a few really targeted ones.
  2. Try creating a separate page for resources that you use or recommend, and create a post or page for each ad telling why it’s worth looking at.
  3. If you are using Google Adsense, make sure to design your ads so that they blend in to your site, but are also in easy to find places (such as before or after posts, or close to your main content in the sidebar).
• Organization: Nobody wants to be fumbling around through your site trying to find that one post they were looking for. Let’s face it, who really cares about looking for a date of a post from a calendar or your archives? They really want to find a specific topic or category. Here are a few simple organization tips for your content.
  
  1. Make an easy to navigate menu that links to your main categories and subcategories.
  2. If you can’t make a menu, make your own menu in a sidebar widget or gadget by simply creating links to these categories and subcategories.
  3. Place the most important info or links toward the top of the page in your sidebars. If you are using a search feature, put it right at the top or in your header. Otherwise it will never get used.
  4. Label your posts very specifically, but with several different words or phrases that mean the same thing. Then, make sure to put a search box at the top of your site so that people can easily search for a word or phrase and find just what they are looking for. Quick Hint: If you want to know how search friendly your site is, do a quick search for a topic you know you wrote about a while back and see how long it takes you to find it.
  5. If you are using a 3 column design, organize your sidebar by the content you are displaying in them. For example, you can use one sidebar for info about you and your site or ways to follow you, and the other for ads and links to other sites.
  6. LESS IS MORE! The more content on a page, the shorter amount of time most people will stay on that page. This is why menus and sub-menus are soooo helpful. The main visible menu shows the main categories, and helps people focus on what direction they want to go in. Once they’ve chosen a basic direction, than you can give them more specific options within that direction.

Design Elements:

• Who doesn’t love a beautiful design?! However, your design should never overpower your content. Your design should direct the reader to the content not only by drawing their attention to it, but also by giving a visual message of what your site is all about.
• Avoid Loud colors or large graphics. Not only do they distract the eye and can overwhelm the senses, but they can also take a long time to download. If you want to use patterns, try to use a repeating pattern for the background so your page loads faster.
• Three column designs are a must if you intend on displaying a lot of widgets or gadgets. No one wants to have to scroll forever.
• Header Design: Try for a clean, uncluttered header that clearly depicts what your site is about, and contains links or buttons to what you really want people to go to.
• Footer Design: Don’t put important content in your footer that is not displayed elsewhere on your site, especially if you are using a blog. Most people don’t make it that far down the page. Footers should be eye friendly, and contain links or items that are either mentioned elsewhere already or are not as important.
• Scrolling Buttons: These are great for items you don’t want people to miss, and they also give you more room in your main content. Just make sure that they blend in nicely with your theme and don’t detract or distract from the main thing. A back-to-top button is also a great way to help people quickly get back to the header without having to scroll a long time.

To wrap it all up, here are a few questions to see if your site is welcoming and easy to navigate.

• Can someone tell what my site is about within seconds of viewing it?
• Does my theme compliment my site or detract from it?
• Does my theme match the message of my site?
• Can people easily find what they are looking for on my site?
• Are people directed to what I want them to look at immediately on my site?
• Do people see my content first or annoying ads first on my site?
• Do people ever see the ads on my site and do they compliment the content that they just read?

Those were just a few simple tips, and there are a ton more. Please leave a comment if you have other tips to add, or if you have a question. Also, let me know if you are interested in a customized Wordpress or Blogger theme design.

I have created buttons for several other sites (such as the ones in my right side bar), but I’ve finally gotten around to creating a button for this site that people can add to their own blogs, etc. as a way to advertise my site. Here are simple instructions for how you can create your own button with visible code so that people can easily grab it to add to their own site and further promote your blog or site. It will look exactly like my button in the right side bar (with the title “Grab My Button,” except your own image and link will appear in whatever dimensions you create your image in. It is very simple!

• Create an image that you want to use and save it to an online hosting account or to your ftp site.
• Copy and paste this code into a text widget, and replace the items in red to match your own image url and title.
  <center><a href=”THE URL TO YOUR SITE” target=”_blank” title=”YOUR DESIRED TITLE“><img alt=”YOUR DESIRED TITLE” src=”THE URL TO YOUR IMAGE“/></a></center><center><textarea id=”code-source” rows=”3″ name=”code-source”><center><a href=”THE URL TO YOUR SITE“><img border=”0″ src=”THE URL TO YOUR IMAGE“/></a></center></textarea></center>
• Note: If you are using blogger, just choose to Add a Gadget and click on the HTML/Javascript button to paste this code into. In Wordpress, a simple text widget will work.

That’s all there is to it! If you are a regular subscriber to this site, or you like the posts here, please make sure to grab my button from the side bar and add it to your site! Feel free to let me know if you want a personalized button image that will match your site perfectly and fit the standard button dimensions.

Here’s a brand new theme with some extra goodies thrown in. It is a widget ready theme that includes a top menu and a fun scrolling brick wall background. Click here to download this theme. The first screen shot pictures exactly what the theme looks like. Notice that there is plenty of space in the header for you to add your own png or gif to personalize this Wordpress theme to fit you. Please see my post on how to add images or buttons to your header for simple instructions on how to do this. Note: instructions are at the bottom of the post.

I’ve included a sample header image in the zip folder that you can use if desired as well as free social icon buttons. See the example image of what your blog can look like if you choose to use the icons and the header image I’ve included. You can view my post on how to add scrolling buttons to your theme for instructions. Note: the instructions are toward the bottom of the post. You can always feel free to leave a comment or contact me if you have questions or need any help with adding buttons or images.

After saving the zip folder to your computer, you can either upload the zip folder directly to your blog through your Wordpress dashboard, or you can unzip the folder, and upload the theme folder itself to your sites ftp folder. Make sure to save it in your themes folder.

As always, feel free to contact me if you are interested in a completely customized and personalized Wordpress or Blogger theme.

Well, as you can see if you’ve visited my site before, I’ve just updated the theme again. I like to create new design themes for my own site both for variety as well as to demonstrate some nice Artisteer, Photoshop, and WP tweaking techniques. I’ll list a few of those techniques in this post.

Photoshop:
Designing your own site elements really helps to tie the whole site together completely. By creating your own glare image, buttons, header images, etc. you can give your site a completely customized look without much work. For example, I created the background pattern using Photoshop. All I did was grab a plaid image off of the web (make sure you always only use copyright free images or pay for stock images!) I then, added the green, semitransparent crisscross stripe on a 100px x 100px image of the pattern. I also made sure to define it as a pattern so that I could use it in other elements of the design.

Artisteer:
The beautiful part of Artisteer is that it allows you to easily add your own graphics as texture, backgrounds, glares, etc. I uploaded my 100px x 100px image of the plaid and chose a tile repeat. I also chose the Overlay setting for the blending option in Artisteer and gave it a tiny bit of transparency so that the gradient I chose for the background would still show through nicely.

Artisteer comes with its own texture and pattern designs as well, which are nice to use. The header, button header, and footer are all sporting one of the many built in Artisteer texture graphics.

A great tip for Artisteer is to choose a nice solid background image or texture as a canvas for buttons and a logo you add to the code later. Note: Always make sure to make your header text as small as possible, the same color as your background, and put it in an out of the way spot in your header. This way, search engines will still find the text, but you will also be able to add a graphic as your main title.

Wordpress Trick:
Because I had a relatively plain header to start with, I was able to add my own clickable logo button and social icons to make the header look complete and give it nice interactivity. To do this, simply follow these steps:

• Create your images and upload them to your theme’s image folder.
• Add appropriate div classes and links to your Header PHP. It should look something like this (added code in orange):
  <div class=”art-Header>
  <div class=”art-Header-logo-png”onclick=”location.href=’URL TO THE LINK YOU WANT’;” style=”cursor: pointer;” title=”Home”></div>
  You’ll need to copy and paste this same code for as many images that you want to add. Just make sure that you label them each based on what they represent, and of course change the display title url to match. You’ll need to use the exact name for the CSS.
  
• Add  code to your CSS to display your images in the way that you want. Go to your Style Sheet CSS and find this /* begin Header */ Here is an example of the CSS code you should add for the example above (note, make sure to keep the div order the same as it is in the Header PHP):
  div.art-Header-Logo-png
  {
  position: absolute;
  z-index:0;
  top: 13px;
  left: 5px;
  width: 503px;
  height: 206px;
  background-image: url(‘images/header.png’);
  }
  You’ll need to make the width and height appropriate to your image size, change the position as desired, and most importantly make sure that your img url is the name that you saved your image is into your themes image folder.

Always make sure to save the php file before doing any editing in case you make  a mistake. You’ll most likely need to tweak the CSS several times in order to position your graphics exactly where you want them.

Wordpress Pluggin:
I made good use of the Display Pluggin available through Wordpress. This pluggin allows you to decide which pages you want certain widgets to be displayed on. Very helpful, and you could really have a lot of fun displaying a different graphic button for each page if you wanted to. (The images I added to the sidebar of the About and Welcome page is just some html I added to a text widget.)

I hope you enjoy this new theme, and please let me know if you are interested in a customized Wordpress or Blogger theme with setup included.

These are some buttons I designed for a Western themed sites I did recently (email me if you are interested in seeing the working site), and I wanted to make the buttons available to you for only $10 for all 4 button images. I offer some free buttons (and will continue to add to this collection) on my Blogger Scrapbook Site. These, however, are a very special design with a rustic wooden feel and are perfect for a Western Themed or Rustic Themed blog or site design. The image on the right depicts all of the buttons as they are displayed on a site that features a wood background. These images were designed to be scrolling images on the side of the screen, but they can be incorporated anywhere you desire to put them on your site.

How to Download these Buttons:

Simply click on the “Buy Now” button to be taken to a secure paypal form to purchase the button images. Once your payment is complete, you’ll be directed to a zip folder containing the buttons that you can download to your computer.

How to add these as scrolling buttons to your Wordpress Site:

• Upload each individual image to your ftp or to a free image hosting server and copy the url of each image location.
• Add the following code to the footer.php of your Wordpress Site by clicking on the Editor button under Appearance on your Dashboard and then clicking on the Footer.php in the right hand column. I would put it toward the bottom, and make sure that you don’t accidentally add it inside of another div.
  <div>
  <a style=”display:scroll;position:fixed;top:10px;right:10px;” title=”RSS” href=”YOUR RSS FEED URL HERE“><img src=”YOUR RSS IMAGE URL HERE“/></a>
  <a style=”display:scroll;position:fixed;top:80px;right:11px;” title=”Twitter” href=”YOUR TWITTER PAGE URL HERE“><img src=”YOUR TWITTER IMAGE URL HERE“/></a>
  <a style=”display:scroll;position:fixed;top:147px;right:9px;” title=”Contact” href=”YOUR EMAIL ADDRESS“><img src=”YOUR CONTACT IMAGE URL HERE“/></a>
  <a style=”display:scroll;position:fixed;top:212px;right:8px;” title=”Facebook” href=”YOUR FACEBOOK PAGE URL HERE“><img src=”YOUR FACEBOOK IMAGE URL HERE“/></a>
  </div>
• Switch out the “Your Image Urls” with the urls that you just saved, and of course make sure to switch out the link urls to your actual contact links. Also, make sure that each titles matches each image. (This is very important, so that when someone scrolls over your facebook button, the words Facebook appear – or whatever text you put there.)
• The code I’ve given above has the display dimensions that you see in the image above. You can change how they appear, however, by editing the pixel numbers and choosing whether you want them to appear on the left or right hand of the screen, and whether you want them to appear on the top or bottom of the screen.

Please let me know if you have any trouble downloading the images or adding them to your site. Also, feel free to contact me if you are interested in customized button design to match your current theme, or if you are interested in a complete theme design which always include customized buttons and graphics. (You can click on my signature to email me.)

Adding a scrolling “Back to Top” button is a very nice feature for your blog so that people don’t have to keep scrolling to get back to the top of the page. I have already posted on how to do this for your BlogSpot blogs, and you can view that post on Blogger Scrapbook by clicking here.

Adding this button to Wordpress takes a few more steps, but is still relatively easy. Now, I got the basic information from a site called instantShift, but they don’t have all of the information you need to actually add a button yourself. But, not to fear, I have been working and tweaking until I figured out exactly what you need to do in the simplest way! So, here goes!

1. First of all, create and upload an image you want to use to your Wordpress ftp, and save the url to it’s location.
2. Secondly, log into your dashboard and click on Editor, then Header.php.
3. Look for the following code:
   </head>
   <body>
4. If the body element already has an id, copy that id name, but if it does not, give it an id by changing it to the following and  save your template:
   <body id=”top”>
5. Now, go to your Footer.php and find the following code
   <p> class=”art-page-footer”></p>
   </div>
6. Directly after that code, add this code:
   <div>
   <a style=”display:scroll;position:fixed;bottom:10px;right:10px;” href=”#top“><img
   src=”THE URL TO YOUR IMAGE HERE”/></a>
   </div>
7. Change the URL to your actual image url, and you can change the position on the screen by changing the red elements above.
8. Make sure, that if your Header.php already had an id associated with the body, that you replace “#top” to that id instead making sure to keep the # and quotation marks.
9. Save your template, and you are all done!
10. If you also want to add a text link to the bottom of your posts, all you need to do is add the code below to the bottom of each post that you write (just make sure that you are in HTML mode and not Visual):
    <a href=”#top”>Back to Top</a>

I just did this for my own site, and it works great in IE, Firefox, and Safari. Hint: You can use this same trick to add buttons to your footer that link to your RSS feed, or other items. Simply change the “#top” to the http address where you want the image to link to, and of course, you’ll need to add the correct image and image url as well.

Please leave a comment if this was helpful or if you have any questions, and feel free to contact me if you are interested in any customized graphics or buttons. I do have some free pre-made and hosted back to top buttons available on my Blogger Scrapbook site.

Based on a comment I received earlier today, I thought I should do this post. Many people think that Wordpress can only be used for blogs, or that you need to know some complicated code in order to turn your current WP blog into a full site. Both of these statements couldn’t be further from the truth. This site is a perfect example of that, and here are a few simple things you can do to turn your WP blog into a full blown site.

1. Create a static home page
   - This is so simple! Just create a page that you want to be your home page and publish it.
   - Next, create a blog that you want your regular posts to be located on and publish that page as well.
   - Thirdly, on click on the Reading button under Settings on your Dashboard and choose to make your home display a static page. Just choose the page you created for the static page and choose the page you created to display posts for well…your posts.
2. Label your blog something other than “blog” if you don’t necessarily want a typical blog as part of your site. Here are a few examples.
   - Resources or Products: if you offer services or items that you want to display based on category. You can create a page for each category as well, and your main Resources or Products page will display all of your posts.
   - News: use more like a blog to display your latest news. You can always choose to display only 1 or a few posts at a time, as well so that only the newest post is displayed like a regular page.
   - A specific theme. If you only update information on a very specific topic, than label your blog posts page that: movies, music, photos, etc.
3. Use the text widget to create a graphic image or images on one or both sidebars. All you need to do is upload the desired image to your site, than copy and paste some code into the text widget. Let me know if you have any questions on this.
4. Use the Display Widgets plugin from WP which allows you to hide and show widgets on only certain pages (note that this only works with the standard widgets as well as any text/image widgets you add).
5. Make links from your pages with the Page Links To plugin from WP. This does just what it says; it allows you to create a page and link it to any address desired. For example, if you want to make a page out of specific categories, simply click on that category and copy and paste the url into the page link you want that page name to be.
6. Other simple ideas include removing the words “Archive” from when displaying pages that are archives of posts, including a graphic signature to your home page. You can find out how to do these in previous posts of mine.
7. Add a small store through your PayPal account by adding buy now or add to cart buttons by products you post to your site. All transactions are done through PayPal which is super easy and convenient for you. The buttons can be created completely through PayPal and you’ll get the exact code to copy and paste onto your pages. You can also use the E-Commerce plugin, but I’d recommend using this only if you have a more extensive store as it takes more work to set up and takes more space up on your site.

There are a ton of other things you can do, but those are the quickest and easiest ways to turn your blog into a site! Please let me know if this was helpful or if you have any more questions on turning your Wordpress Blog into a regular website. also, contact me if you are interested in a completely original and customized Wordpress theme design with setup.