Backgrounds, Icons, and Buttons
December 23, 2009
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.
Rustic Wood Themed Social Icons Pack!
December 9, 2009
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 FREE for all 4 button images. I offer more 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 picture to the right, and 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: Read the rest of this entry »
Posted in Free Downloads, Store, Wordpress Tips and Tricks | 
Tags: Design, Wordpress Themes, Wordpress Tweaks | 
No Comments »
How to Add a “Back to Top” Button to WordPress
November 17, 2009
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!
- First of all, create and upload an image you want to use to your WordPress ftp, and save the url to it’s location.
- Secondly, log into your dashboard and click on Editor, then Header.php.
- Look for the following code: </head> <body>
- 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”>
- Now, go to your Footer.php and find the following code <p> class=”art-page-footer”></p> </div>
- 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>
- Change the URL to your actual image url, and you can change the position on the screen by changing the red elements above.
- 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.
- Save your template, and you are all done!
- 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.
//
Posted in Wordpress Tips and Tricks | Tags: blog design, blogger tricks, Design, quick designs, Wordpress Tweaks | 6 Comments »
Using WordPress for a full CMS Website
November 5, 2009
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.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
- 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.
//
Posted in Tools of the Trade, Wordpress Tips and Tricks | Tags: blog design, web design, Wordpress Tweaks | No Comments »
Removing the Words “Archive of…” from Category Pages
September 21, 2009
Ok, so I’ve been googling this question for a while and getting absolutely no where. Finally, I just figured out how to do it myself, and I was shocked at how easy it was and that I couldn’t get an answer anywhere online. So, here’s all you need to do.
- Go to the Editor and locate the Archive php toward the top of the right hand column.
- Go inside, and look for the following code <h2 class=”pagetitle”><?php printf(__(Archive for the ‘‘%s’ Category’, ‘kubrick’), single_cat_title(”, false)); ?></h2>
- If you want no text at all to appear, simply delete that line of code and Voila! You have removed it.
- If you want only the title of the category to appear, as I have my site set to, simply delete only the part that begins with the underscore up to single_cat_title. Keep that part and change the (“,false)); to (“,true)); so, your code should now look like the following: <h2 class=”pagetitle”><?php printf(single_cat_title(”,true)); ?></h2>
- Note: you can also change the size of the title by changing the heading tags surrounding the code <h2> and </h2> to a different number.
I’m learning tons about the backend editing of WordPress and hope to be able to design some awesome complete websites using WordPress alone. I’m actually working on a site right now for a church, and all of the changes should be finished soon. They’ll have to put in the content, of course, but the theme and layout will be ready for them.
Stay tuned for other great tips!
Posted in Tips and Tricks, Wordpress Tips and Tricks | Tags: blog design, Wordpress Tweaks | No Comments »
How to Add a Signature Graphic to Your BlogSpot or WP Blog
September 19, 2009
I just got a blogger account and have been playing around with it to give myself more options. I really like it a lot! Grant it, you don’t have nearly the flexibility or options that you have in WordPress, but for a freely hosted blog, it’s really got some sweet stuff! You can check out the blogspot I designed by clicking here.
This is the post I just posted on that site. This is the easiest way to add a signature with an image onto your blog. Of course, this would preclude that you already have a graphic with your image and signature that you want to use or have the ability to make one. (by the way, you easily make one in Paint which is pre-installed on most computers even if you don’t have any other type of editing program. Just make sure to save your image in the size that you want it to appear and as a PNG, or GIF if you don’t have a solid background on your blog, or make sure that the background color matches your article background.
There are two ways to do this, but I highly recommend the second way. Once you have an image, you’ll need to save it to the web. You can always just insert it into a blog post. Make sure to click on Large for the size, and click on either Right or Left depending upon where on the post you want the signature to appear. Now, preview your post and right click on the image. Click on “Copy Image Location.” Make sure to paste that to a notepad document right away and leave that doc. open. YOU WILL NEED THIS SOON! The First Way
The first way is to simply add a little bit of code into your Post Template. You can find this by clicking on Settings, then Formatting on your Dashboard. At the bottom of the page, you’ll see a field that says Post Template. Simply copy and paste the following code into that box and replace (Your Signature URL) with the url you just pasted into the Notepad doc.
<img src=’YOUR SIGNATURE URL HERE’/></a>
*The Second Way (The Best Way)*
Ok, this is the best way, because if you’ve had your blog going for a long time, and you’re just now getting around to a signature, this will automatically put your signature graphic into all of your previous posts! Yay! Also, it helps your blog load faster.
- Go to your Dashboard and click on Layout, then click on Edit HTML. Make sure to click Expand Widget Templates and first make a copy of the entire thing and save it just in case. Next, hit Ctrl+F and find the following code: <data:post.body/> or it might be <p><data:post.body/></p>
- Directly after that code, paste this code: <p><div align=’left’><img src=’YOUR SIGNATURE IMAGE URL HERE’/></div></p>
- Simply replace the words (Your signature image url here) with the url you copied onto the Notepad doc. and voila, your’e signature will now magically appear on all posts of your blog as well as on every new post you make. To change the graphic, simply put in the new url of your new image. If you want to make your image a button that links to your email address, just add the following code directly before <img src…but don’t leave any spaces. <a href=mailto:YOUREMAILADDRESS”>
For WordPress, it’s not quite as simple to manually add a signature to each post, but there are a few options.
- Manually add the signature to each post. This is the easiest thing to do, although, if you’ve had a blog for a while, you will either have to manually edit old posts, or just not worry about the signature in the older ones.
- Simply create your graphic as a png or gif file and save it to your site.
- In a post, add that graphic as an image to the bottom of the post (like you would add any other image)
- In the HTML setting, just copy the code and save to use on other posts or pages that you want.
- Add a signature to each single post (in other words, your signature will only appear on individual posts that are clicked on, but not on each post listed on the main blog page).
- Simply copy the following code into a Notepad document and replace the img url with the url to your hosted image and replace the link url to the link you’d like your image to…well, link to.
<a href=”THE URL YOU WANT THE IMAGE TO LINKE TO”><img src=”THE URL OF YOUR IMAGE LOCATION” alt=”" width=”102″ height=”46″ /></a> - Save this notepad file, and use it to copy and paste into the end of each new post (make sure you click on HTML).
- Simply copy the following code into a Notepad document and replace the img url with the url to your hosted image and replace the link url to the link you’d like your image to…well, link to.
- Add the signature plugin from WordPress. I have not tried this out, but it’s gotten good reviews. I just didn’t want to add one more plugin and would have preferred to have found a way to manually enter code that would make the graphic appear automatically on each of my previous posts and future posts. Oh well. The nice part about copying the simple code over each time onto a post, though, is that you can choose when you add your signature more easily. The great part about the plugin is that it automatically inserts the signature into all of your posts past, present, and future.
Please leave a comment to let me know if this was helpful.
