Welcome to the 6th and final part of the PSD to WordPress using Dynamik for Genesis tutorial series! In the fifth part of the series, we changed some widths to make the theme work for us as well as style most of our home page. In this part, we’ll get our slider going and adjust some responsive settings to make our site look nice on mobile devices. [VIDEO AT BOTTOM OF PAGE]

PSD to WordPress adjusting slider dimensions

Adjusting slider dimensions


Using a Slider in WordPress

The first step in getting a slider ready for your theme is finding one to use. There are tons of sliders out there, but we don’t need anything too fancy for our purposes. Taking all of this into account, I chose to use the Genesis Bootstrap Carousel by Justin Tallant. It’s easy to set up, responsive and it works really well!

Once you’ve installed the plugin, we need to change a couple of settings to make the slider work for our WordPress theme. We can do this by going to Genesis > Carousel Settings. We’ll change the post category to New Items since that is the category that we put our posts in.

Our slider should have a width of 992 and height of 428 for it to look good in our theme. Weird number, yes, but after fooling around with it a bit, this odd combination worked best.

In order for our post titles to show up in the slider, all we have to do is check off Display Post/Page Title in Carousel Caption. Instead of using the excerpts, we’ll actually show some our readers some of the content in the page and limit the characters to 125. We’ll also change the width of our caption to 35% and move it to the top instead of the bottom.

Dynamik Custom Options

There are many ways I could’ve added the slider to the theme, but I wanted to show you how to do it using the custom options in Dynamik. So for the tutorial, I’ll show you how to create the slider using custom conditionals, custom widget areas and a custom hook box.

We only want our slider appearing on the front page of our site, so we can select the ‘is Front Page’ conditional from the drop down menu. You can also create your own conditionals, like is_home. You can see how I did that in the video.

Our slider needs a widget area, so we need to create one. Easy game with Dynamik. We input ‘slider’ for the name and we’re basically done. You can elect to hook it somewhere if you’d like, but for the tutorial, I turned it into a shortcode so we can use it in the custom hook box we’ll be creating.

In the Custom Hook Boxex options, we’ll create a ‘slider_hook’ and hook it to ‘genesis_after_header’. We’ll use the ‘is_front_page’ conditional we created a couple of steps ago. The text area is where we add the code that we want our widget to use:

<div id="slider" class="candy"><div id="slider-wrap"><div id="featured-slider">[slider]</div></div></div>

Styling the Slider

Part of styling the slider is adjusting the size of pictures that it will take. You can add custom thumbnail sizes in Dynamik by going to Genesis > Dynamik Settings > General Settings and adjusting your custom thumbnail sizes. Our slider will be using a width and height of 950 and 300, respectively.

With some custom CSS, we finish the styling of the slider. Remembering the div id’s and classes that we added in our hook box, we add the following into the Custom CSS Editor:

#slider.candy {
	margin-bottom: 0;
	padding-bottom: 15px;
}

That code adds some space below our slider.

#slider-wrap {
	background: url(images/slider-bg.png) no-repeat scroll center top transparent;
	max-width: 1041px;
	margin: 0 auto;
	padding: 50px 0 0;
}

That bit if css adds the candy in the back of the slider as well as centering the slider on the home page.

#featured-slider {
	border: 5px solid #fff;
	height: auto;
	margin: 0 auto;
	max-width: 920px;
}

With that code, we added a white border around our image and made sure our images were centered inside of the slider.

Yay! We’re done! Not so fast, my friends. The captions inside of the slider don’t look anything like the PSD. In order to achieve a look similar to it, we need to add the following css into the Custom CSS Editor:

.carousel-caption {
	background: rgb(231, 222, 192) !important;
	background: rgba(231,222,192,.8) !important;
	top: 10px;
	left: 10px;
}

.carousel-caption p {
	color: #464545 !important;
}

.carousel-caption h2 {
	font-family: 'Lobster', serif;
	font-size: 22px;
}

.carousel-caption h2 a,
.carousel-caption h2 a:visited,
.carousel-caption p a,
.carousel-caption p a:visited {
	color: #E20711 !important;
}

Last, but not least, our navigation arrows need to move down so they’re not in the way of the caption. We need to add something like the following to our css:

.carousel-control {
	top: 80% !important;
}

PSD to WordPress using Dynamik for Genesis finished theme

Our finished theme looks like this!


Responsive Styling

Responsive themes are becoming more and more important in the world of web design and Dynamik for Genesis helps you get there very quickly. We don’t have to adjust much in order to get it looking better on a small screen, but we do have to add some css to the first media query. Click your way to Genesis > Dynamik Design > Responsive and add the following CSS into the first media query:

#ez-home-container-wrap .ez-widget-area h4,
#ez-home-slider-container-wrap .ez-widget-area h4 {
background: #ea1a35;
}

#ez-home-container-wrap #ez-home-top-1.ez-widget-area {
margin-left: 0;
}

That’s what I’d call a wrap, people! If you’ve never done it before, you’ve just taken a PSD and turned into a WordPress theme with the help of the Genesis framework and Dynamik for Genesis.

Want to download the Dynamik for Genesis skin? Just share it with your friends and followers on Twitter and you can download it for free!

Want to download the Genesis child theme? You can get that for free, as well! Just share with your followers where you got it from!

I hope you’ve enjoyed and gotten some use out of the PSD to WordPress Using Dynamik for Genesis tutorial series. If you have any questions or comments for me or other readers, please leave a comment below and let’s start talking!

Comments

  1. Sandy says

    This was by far one of the best tutorials I have ever taken. It is clear that you put a lot of work into it and it has helped me immensely. Thanks so much for great work.

  2. says

    I’m trying to download, the skin & child theme but i get a ’404 Not Found error’

    You have done a great job! Mostly i dont get any wiser from video tutorials, but these are amazing. Even i getting wiser from it :)

  3. Razak says

    Hey mate,

    I was wondering why my slider wasn’t working, then I realised I never had the slider images. Did I miss something along the way or did you not provide them?

    Just a bit lost.. lol

    Also, I was having a few tiny problems. I am following your guide step by step but:

    1. in safari my search box doesn’t look right (firefox its fine).
    2. the brown area where the 3 widget boxes are is not expanding http://www.aimachieve.com – when i put the code you provided in the css at the front end (which is now working btw – thanks) it removes all the brown completely.
    3. Slider image lol.

    I don’t know if there is anything else. But that would be great. Just trying to get my head around it all – in the process of learning and found your awesome guide.

    THANKS OZZY!

  4. says

    I found this really useful Ozzy thanks so much.
    What would be cool would to watch you choose a website that is live and build one very close to the original using firebug and the css builder?

    Again great tutorials :)

    Michael

    • says

      That’s a good idea in theory, but that whole copyright infringement thing scares me.

      I may do an HTML to Dynamik tutorial where I have the rights to use the HTML website, though.

Leave a Reply