- WordPress Tutorials
- Artisteer Tips
- Add Button Class to Widget
- Add Style to Text Widget
- Add a Sidebar in the Header
- Create Custom Post Header
- Create Unique Page Template
- Create Secondary Menu
- Create Styled Donate Button
- Create Widget Style – Part 1
- Create Widget Style – Part 2
- Hide Category Titles
- Styling Featured Image
- Styling Sheet Borders
- Using Theme Options
- Design Tips and Tricks
- Recent Projects
Professional Grunge Free WP Theme
This is more of a “blank slate” theme of sorts to give you the flexibility to use it as desired. It’s got a more traditional style and color using Blues and Grays, but has a slight grunge edge by making use of some great textures. This is a WP 3.1 compatible theme that is widget ready, comes with the ability to use a horizontal and/or vertical menu using WordPress custom menus and full of extra flexibility. Let me give you some more specifics.
The Header
I’ve incorporated a banner widget area into the header so that you can easily add an image to a text widget or a slider to your header. You have the ability to show the headline and slogan text, or you can choose to hide these by a simple check box within the Theme Options panel located under Appearance of your WP Dashboard.
I recommend installing the Meteor Slides Plugin and using their built in Slider Widget to give a nice effect to your header. Each image from the slider can be linked to a specific page or post (or custom url), and you have a lot of options to choose from as far as slide transitions, slide time, and navigation. Throw in another plugin called Widget Logic, and you can have a different slider, image, or widget area on each separate page or post category if desired!
Three free graphics are included within this theme to be used if desired as individual images placed within a text widget for the header or within a slider if desired.
Widgets
There are a TON of widget spaces built into this theme. You can choose to use none or all of them if desired. Let me give you the basic rundown:
- Header Banner: Encompasses the entire header area.
- Banner below the Menu: This widget spans the width of the sheet, but can be as short or as tall as the widget used within it.
- Sidebar: The regular Sidebar Widget space which can include as many widgets displayed vertically as desired.
- Two Top Widget Areas: These two areas if both used will sit next two each other directly above the posts. If only the first widget is used, it will span the width of the area above the post.
- Two Bottom Widget Areas: These respond identically to the Top Widget Areas but are located directly underneath the posts (at the bottom of the page.)
- There are 4 footer widgets which dynamically grow depending upon how many widgets are used and how much content is placed within the widgets. If one widget only is used, it will span the width of the footer, however if 2 or more are used, they will divide the space evenly between the widgets fitting a total of 4 across the screen horizontally.
Widget Styles
There are 5 separate widget styles provided within this theme and they are as follows:
- banner (styling used for the header widget and widget below menu if no padding or margin is desired. Specifically for use with images or sliders to fill the entire space.)
- block (the blue block for this theme’s sidebar)
- post (styling used for text in posts)
- simple text (simple text designed for sidebar)
- footer text (simple text designed for the footer)
You can set default styles for each widget style within the Theme Options, and you can also set each widget style individually within the individual widget editor from a drop-down menu.
Extras
There are a lot of little extras within this theme such as a full array of theme options which allow you to choose the size of your thumbnail images, display of post navigation links, post excerpts, footer links and text, post comments, etc. You also have the ability to display or hide page and post titles from a check box within the post or page editing section. Setting the featured image is also made available here.
How to Access and Install This Theme
Simply click here to download this free theme. After you have downloaded the theme, unzip and install manually, or leave zipped and install through your Themes Panel underneath Appearance of your WP Dashboard.
If you are already using a WordPress Custom menu, simply go into your Menu panel, and select that menu as your Primary Menu for it to appear in your horizontal menu area. You can also create a new menu to be used for a vertical menu if desired. Simply create and save your menu, then go to the Widgets Panel and choose the Vertical Menu Widget. Place where desired, and choose from a drop-down option within the widget’s editor whether you want to use categories, pages, or your custom menu to populate the menu fields.
Here are a few images of the new theme as seen on my testing platform. Please visit my testing platform for a limited time to view a live demo, and let me know if you have any questions. Please note that I now have a different free theme up on my demo platform, but the images below will give you an accurate example of the theme offered here.
This is an example of the them using the free images I’ve included within a header slider.
Here is an example of another smaller slider setting being used with different images as well as the first top widget areas being used.
Here is an example of the footer making use of three of the four widget areas and two of the five different widget styles.
As always, feel free to contact me if you are interested in your own custom theme design, and let me know if you have questions concerning this free theme design.
© 2011, Sarah. All rights reserved.
18 Responses to Professional Grunge Free WP Theme
Leave a Reply
Like This Theme?
Make your own theme using Artisteer, then come back here for tips on how to make the most use out of this powerful design tool!
Best Image Resource
Recent Projects
I am using your Free Professional Grunge theme and love it but I am having a small issue. I used your suggested widget for the slider and the photos don’t fill the header area completely. There is a small gap at the bottom. I am not sure how to fix it, can you offer a solution. I used one of your sample photos to make sure it’s not my photos.
Also, can you tell me the name of the widget you used for you social icons at the bottom of your post? I love them and want to use them.
Hi Tina,
Make sure that in the Meteor Slides Widget, you have selected “banner” style from the dropdown style options. Also, you’ll need to make sure in your Slider Settings that you’ve chosen set the correct dimensions for your pictures and that your images are in fact the correct dimensions. Meteor Slides doesn’t adjust image size, but just the frame that the images are displayed in. Hope that helps.
It’s me again! Hope I am not bugging you. I love the theme and am excited about using it, but I am new to this and not a program. I have been looking for hours for a way to remove the Leave a reply box at the bottom of the page. I want to use the theme as a static website and not a blog, is there a way to remove that box? I unchecked all the items in the “Discussion” area, but it didn’t work. Thanks again for your help and your great design.
There’s no reason that the “Leave a Reply” should be showing up. You’ll notice on the home page of my test platform using this theme, there is no section for commenting. That was achieved by un-checking both the comments and discussion check boxes. The same applies to posts when you un check both boxes. One thing to remember on a post, if you already have a comment on that post, the comment will still appear even after un-checking the boxes, but there will be no text or fields for leaving new comments.
After you have unchecked both the discussion and the comment boxes and updated your posts or pages, make sure to hard refresh your screen (F5), so your cache is cleared.
Thanks so much for your reply. In trying to figure out what’s going on, I realized that the Post a Reply box only posted on the pages that I had already done before I unchecked the discussion boxes. The pages I already had posted, I could not remove the reply boxes. I guess I will spend the day, redoing those pages. If you have a suggestion, let me know. I have really enjoyed your site and your talents. I am running a small business and have to watch the budget, but would consider hiring you for work if I get the project and/or money to hire someone. Do you do logo design, actually it would be redesign? Typically how much does something like that cost?
Hi Tina,
Just out of curiosity, are you un-checking the discussion boxes within the Theme Options page or within each post themselves? If you don’t want any comments, you may want to do both. If you go into a previous post, un-check the boxes and update the post, the fields should be removed. Do you have any plugins that are comment related by chance? That’s my only other thought.
And, yes to your question on logo design. I don’t currently have my print design portfolio up, but have done quite a few logos and business card designs. You can visit the design services page to see a listing of prices. I do graphic design at an hourly rate, and logo projects usually end up being between $50-$75 depending upon the complexity and time requirement.
I must be totally missing something. I went to Appearance then Theme Options. There are no discussion tab boxes there that would apply to this issue.
Then I went to Discussions under Settings and I have none of the boxes checked. (I unchecked them all when I was trying to solve this problem.)
Finally, I went to the individual Pages that I am setting up and there is not an option to have a reply area. The only Theme option is to Show in Menu or Show Title on Page. I also checked plug-ins and I don’t think there are any related to comments.
Would this all have to do with the fact that I am not “Posting” I am building Pages??? Just a thought, I am not a programmer so I have no idea. This is my first website with WordPress and the other programs I used in the past were nothing like this, so I am learning as I go. I really appreciate your insight.
I will be in touch for the logo design!
I am really enjoying working with this theme. I am looking for a way to include my logo on the right side under the Headline and Slogan area. I tried a plug-in BNS Corner Logo, but it doesn’t place right. Do you have any ideas on something that would work with the theme. I will leave it up for you to look at to see if you can help.
Thanks!
The simplest way to add a logo to this theme is to simply create an image that is the same size as the header area itself (so 1000px by 225px) and insert that file into a text widget. To do this, you can simply open up your current logo in any basic design editing software such as Photoshop, Gimp, or even Paint. Just make sure that the canvas area is transparent, and set it to the dimensions specified above. Then, position your logo as desired.
Upload your new image to the web somewhere, then add it to your text widget using the![]()
It’s me again! I want to know if there is a way to have the theme fonts override any font info that I place in the pages? Sometimes it does and sometimes it doesn’t. I am using other documents to copy over bits and pieces of information to the website to save time. That’s when it happens. Any ideas? Thanks so much for you insight! It’s greatly appreciated!
Your problem is copying and pasting from other websites or from Word. You should NEVER copy and paste from other places on the web or from Word straight into a WordPress post or page. You should always put it into a text editor like Notepad first, or else it will add a bunch of other styling code that messes things up. If you paste something into Notepad, make sure to paste it into the HTML editor. You can switch back over to the Visual Editor in your page or post editing section to make style changes that you want.
Wonderful! I had no idea. I thought I was going to have to retype it all! Thanks!
Hello, I am trying to upload your professional grunge theme and I keep getting an error… Am I doing something wrong… Please help!
Thanks
Hi Jen,
Make sure that you unzip the folder when you download it to your computer. There is an additional folder entitled extras that includes the extra free images for the header as well as a text doc with instructions. If you want to upload the theme through the WP dashboard, zip just that one folder titled Professional_Grunge. If you are uploading the theme manually through an ftp client, make sure you don’t zip the folder, but just upload the Professional_Grunge folder as is.
Hi , I was wondering if there is a way to reverse the sidebar in this template to the right side? How would I do that?
Hi Barb,
You’ll notice in the Index.php file and the page.php file the reference for the sidebar is below the post. By default, whatever is listed first is on the left (because items by default if not specified are aligned to the top left). So, you’ll need to switch the placement of the sidebar to just above the post wrapper instead on both the Index.php and the Page.php files. If you are using Artisteer and don’t want to manually switch the code around, you can create a basic two column template (with the same basic menu, header, and footer placement) and copy the index and page php files into the theme you are trying to use. You won’t have to worry about the styling at all because that’s taken care of in the css sheet. Hope that helps.
Wow, thanks Sarah, that was easy! Just want to let you know I love your templates. You are so talented. Your images and templates are alive and vibrant. Instead of just looking at a website, they get you excited to be looking at the site!
Thanks so much, Barb, and glad to help.