Custom Design for STAFF page

[Sasha Bell]

I am interested in creating a couple of custom pages, but using the visual layout of the STAFF page on your demo site. I am essentially wanting to add a series of information boxes, one after the other, each with their own image, text and a link to a Vimeo/YouTube link. Basically replicating what is on this page http://www.sashadylanbell.com/Drama.html, but using the separate box layout in your design.

Is it possible to tweak the staff page layout to achieve this, or is there another simple workaround? New to WordPress (and website design) I was hoping for a bit a layman’s idea of how to achieve this, if there is one.

Any help would be greatly appreciated.

[Bill Robbins]

Sasha,

Thank you for your business first of all and great question. You can use the staff section to create that for you. One theme tweak I would suggest is this:

1. Go to the appearance section and select edit.
2. From the list of files on your right, choose post-type-staff.php and look for this spot:

   
   'rewrite' => array( 'slug' => 'staff-group', 'with_front' => false )
   

3. Change the staff-group to another word here. That will change the URL so your listing no longer says “staff-group” just before the group name.
4. Save your changes.

That’s the only part that your site’s visitors would likely see that indicates that section was originally intended for something else.

If you have any questions, let me know,
Bill

[Sasha Bell]

Fantastic. Thanks for clearing that up. If I may ask a question leading on from that.

I wanted to know if you can add custom backgrounds for EACH of the STAFF groups. In other words, if I am using the STAFF theme for a “Videos” page and then again for an “FAQ” page but wanted different still backgrounds, how would one do this?

I know how to change one through the APPEARANCES > THEME OPTIONS > STAFF section, but that image then seems to be included all ALL staff-tempated pages.

Thanks,

[Bill Robbins]

Sasha,

Great question. It is possible to do that with a bit of theme editing. Here’s what to do:

1. Go to the appearance section and select “edit.”
2. From the list of files on your right, choose custom-js.php and look for this spot:

   
   <?php if (is_tax( 'staff-group' ) && of_get_option('staff_image', $single = true) != "" ): ?>
   											{image : '<?php echo of_get_option('staff_image'); ?>'}
   

3. Replace that with this:

4. In line 1, change the group1 to the "slug" of the staff group you'd like the first image to go with.
5. Replace the http://yoursite.com/image.jpg1 with the URL to the image you'd like to have for your first group. You can find the image URL by going to the Media section of your WordPress control panel and selecting Add New. Upload your image. Once it's finished, WordPress will give you the URL to that image. You can copy it and paste it in there.
6. Next for your second group, replace the group2 in line 4 with the "slug" of your second staff group. Change the image URL there too.
7. If you need more than two, you can copy lines 4 and 5 and paste them below line 5 to create more spaces for them.
8. When you're finished, save your changes.

That will give you the option to add in background images for each staff group.

If you have any trouble, let me know,
Bill

[Sasha Bell]

Thank again. That make sense, though something in the execution seems to be causing my website to completely flip-out, so thought I should double-check this is the correct procedure and if so, whether there is anything that could be causing these issues.

Basically when I replace these two lines and add my own details upon hitting “save” everything goes blank. I can’t load pages or visit any part of the site. There is just a blank white screen where a moment ago there was content. To fix and go back I then have to manually replace the custom-js.php file with the original from your theme download.

I have tried this 5 separate times, double and triple-checking your instructions, so I feel I must be missing something. I have checked the image location URL names for replacing images and am using the ‘slug’ names on the newly-created pages, as per instructions.

I am currently designing the site on my computer locally, so it is not yet online, if that makes any difference.

Any insight on what might be going wrong would be greatly appreciated.

I look forward to hearing back.

[Bill Robbins]

Shasha,

Sorry about that. Any chance you could paste the code you’re working with at Pastebin.com and then post the link to your code here? I can take a look at it and hopefully find the bug. If you want to post the whole custom-js.php that would be great.

Thanks,
Bill

[Sasha Bell]

Thanks Bill,

The amended code looks like this: http://pastebin.com/4YcBuuQL

Also, this is what it looked like before the pasting (just in case I am doing something wrong there): http://pastebin.com/7rRGVsGi

Please let me know if you need anything else.

I appreciate the help.

[Bill Robbins]

Sasha,

So sorry. It looks like I forgot two closing ) in the code above. Try this:

If you run into trouble, let me know.

Enjoy your week,
Bill

[Sasha Bell]

That did it. Thanks again, Bill. I am very happy with my new website thanks to the template and your continued support.

[Bill Robbins]

Sasha,

I’m so glad that worked for you and that you’re happy with your new site. If I can help with anything else, just let me know.

Take care,
Bill

[Sasha Bell]

Hi Bill,

One more extension to this topic, if I may. I am trying to now add separate images to the backgrounds of individual STAFF members, once they have been clicked in the STAFF GROUP page and a new information screen opens. The image that comes up is still the default “STAFF” image.

I trust there is a simple coding change I am missing somewhere along the line.

Your help would be appreciated.

[Author]

Posts