Professional Grunge Free WP Theme
Professional-Grunge

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:

  1. 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.)
  2. block (the blue block for this theme’s sidebar)
  3. post (styling used for text in posts)
  4. simple text (simple text designed for sidebar)
  5. 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, reflectingthedesigner.com. All rights reserved.

March 22nd, 2011 at 6:40 am

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.

March 22nd, 2011 at 6:49 am

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.

March 22nd, 2011 at 4:34 pm

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.

March 22nd, 2011 at 9:10 pm

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.

March 23rd, 2011 at 7:50 am

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?

March 23rd, 2011 at 8:06 am

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.

March 23rd, 2011 at 11:51 am

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!

March 27th, 2011 at 11:59 am

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!

March 28th, 2011 at 10:11 am

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

March 28th, 2011 at 5:41 pm

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!

March 29th, 2011 at 7:54 am

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.

March 30th, 2011 at 4:51 pm

Wonderful! I had no idea. I thought I was going to have to retype it all! Thanks!

Jen
May 25th, 2011 at 3:44 pm

Hello, I am trying to upload your professional grunge theme and I keep getting an error… Am I doing something wrong… Please help!
Thanks

May 25th, 2011 at 5:04 pm

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.

Barb
March 12th, 2012 at 3:02 am

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?

March 12th, 2012 at 8:06 am

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.

Barb
March 14th, 2012 at 2:32 am

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!

March 14th, 2012 at 10:00 pm

Thanks so much, Barb, and glad to help.

June 5th, 2012 at 3:26 pm

Is there a way to make the drop down menus not so transparent? It’s kind of hard to read.

Thanks!

Wiley
June 6th, 2012 at 5:19 pm

You have to edit the submenu.png image. Make it darker, lighter or less transparent.

June 6th, 2012 at 7:28 pm

Yes, exactly. If you don’t have software to edit the image, you can simply remove the background image and make it a color instead. You can still also add a transparency through the css.

Wiley
June 6th, 2012 at 1:20 pm

Hey there. Trying our your theme.

I’ve noticed your Below Menu Widget Area widget only displays on content pages, and not the home page. Is there any way to make the widget (example with custom text) in the Below Menu Widget Area also display on the home/front page?

Thanks

Wiley
June 6th, 2012 at 1:54 pm

I did this…

Removed from the Page template and placed it in the header template.

Works so far …

June 6th, 2012 at 7:27 pm

Wiley, the code goes into the template where you want it to be displayed. If it’s in the default page template, it will appear on every page that the default template is used. If it’s in the one column page template, it will only appear on pages that have that template selected. And, yes, if you add it to the header, instead it will appear on every page.

Wiley
June 6th, 2012 at 1:55 pm

Removed ?php get_sidebar(‘belowmenu’); ?

June 13th, 2012 at 12:01 am

I am new to WordPress so I’ll research as much as I can before I ask so as not to bother too much. I wanted to create the site just as in your example to get a feel for where things go and how they are laid out.

This first problem I seem to have is with the header banner. You mentioned:
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.

I don’t seem to find this banner widget area and how to add an image to a text widget.
Thanks in advance for your patience.

June 14th, 2012 at 3:57 pm

I won’t be able to help if I don’t have more details. Can you please let me know exactly how you added the banner widget area?

Raul
August 15th, 2012 at 11:40 pm

Hello – before anything I want all of you excuse my English if I write something wrong.
Im from Cuba and still learning. I will try my best.
Im not an experienced web designer or computer master , but have some knowledge working with Photoshop/Dreamweaver/Artisteer/etc-etc.
I have a question : If I make a new Design/Template in Artisteer , do Im able to use it in WordPress?
Because I was reading about something that say : …. you need to buy WordPress hosting… or something like that….. I dont remember….
Thanks…… Raul

August 26th, 2012 at 9:40 pm

You need to have a self hosted site and not use the WordPress hosting in order to use a custom template that you create. I’d recommend looking at the documentation within the Artisteer website for help on this.

Dan
September 24th, 2012 at 7:15 am

G’day Sarah,

Thanks very much for your work here. Your effort is so appreciated.

I’m having issues getting meteor slides to work with this theme. Another website I’ve build (through artisteer) doesn’t have this same problem… but I just can’t get it to work in this case.

I installed a restore jquery plugin to see if that was the issue, but no luck.

Any ideas?

(To be more specific when I say “It’s not working,” the slides won’t show up at all – neither in the header as a widget nor as part of a page, via shortcode. I’ve added one of your stock images into the media library, attached it to a slideshow and then called the slideshow each time. The height/width settings are set appropriately).

Thanks very much,
Dan.

LEAVE A COMMENT

This blog is kept spam free by WP-SpamFree.