Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Dreamweaver has a good number of layout power tools built right in, many of which rely on the Adobe fostered framework Spry. Putting them in a standard Dreamweaver page is pretty much point and click. Adding them to a WordPress page takes a bit more work, but it's definitely doable. In this lesson, I'll show you how to add a Spry Accordion panel to a WordPress page. But first, let's create a new page template to work with. To do that, I am going to copy the index.php page.
So let me expand my Files panel, and in the roux folder, I'll select index.php, and then press Command+D for duplicate. Once that's done, I'll select the index - Copy.php and rename it, and I am going to name it events. Now, let's open it up. I'll collapse the Files panel and go into Code view. Now, I need to add my template declaration header up top here. So, I'll do that starting with a PHP code block, and then my comment frame, and inside of there, Template Name: Events.
So now, I'll save that page, and let's create a new page in WordPress that uses our Events template. So I'll go to Pages > Add New. I'll put in a title for this one, Homecoming is coming! And just some sample placeholder text for now, Text for homecoming event. Let's switch the Template to Events and Publish. Okay.
We'll view the page, and there is our Roux Academy Blog, Homecoming is coming! Now, let's customize this a little bit more. We'll go back to Dreamweaver, and change Roux Academy Blog to Roux Academy Events. I'll save that. Once I go back to my browser and click Refresh, that update will take place immediately. You can easily go back and forth between Dreamweaver and WordPress, making changes as needed. So now we're ready to add in our Accordion panel.
I am going to go into Split view here, and you'll notice that I have Invisible Elements turned on. Now, that's found under the view options, and it's very handy sometimes for quickly isolating certain code blocks, especially when you've got lots of PHP code, and you're not quite sure what is what. Rather than staring at the code, sometimes I'll go into Split view, and if I know about where the code block takes place, I can find it more easily. So, what I want to do is select the PHP code block right after Not Found.
That PHP code block ends the loop within WordPress. So, we're going to go just outside that. So I am going to click my right arrow once, and move, as you can see, in Code view just to the right of the code block. And now we're ready to insert our Spry Accordion panel. So, let me double-click on the Insert Tab here. Then I will switch to Spry. You could also go to Layout if you wanted to, but sometimes Spry is easier. And I'll scroll down 'til I see Spry Accordion, and click it once to insert it.
Now, let me open up my Property Inspector. It's very handy when working with Spry, especially when you're working in Split or Design view, you can really take advantage of Spry's tight integration and use the Property Inspector for a lot of different kinds of manipulation. For example, now that I have the Spry Accordion Tab selected, that will give me my custom Property Inspector. And if I want to add a third panel here, I'll just select Label 2, that's the second panel, and click the Add button. That will put a third panel right after my selection.
Now, let's go ahead and change the headings. I am going to go ahead and just select the first one to open it up. I'm going to make the first heading Transportation. This Accordion panel will contain some standard content that I want to appear on every events page. So, we'll have some information about Transportation. We'll also cover Restaurants, and I'll put that label in Label 2, and Label 3 will become our Lodging category. All right. Let me save the file.
So I've selected them now, and I'll press Command+C to copy them, and I am going to put them in the roux folder. Let me just scroll down. I believe it's already opened up, and there it is. I am going to go ahead and just put it in a similar folder that I'll create now by right-clicking on roux, and name it the same, SpryAssets. And with that selected, press Command+V to paste in my files. Now what we're going to do is go back to our code, where if we scroll to the top, you'll see that a script and a link tag were added, pointing to where the files were initially saved in the site root.
We're going to change this path so that it points to the roux folder, SpryAssets folder. And for that, I'll use a WordPress function called bloginfo to find the stylesheet directory. So, it's a PHP code block. And within that is the function bloginfo with the parentheses and followed by a semicolon. Within the parentheses, we'll use double quotes and the key term stylesheet_directory.
This will point to whatever folder is using the current theme's stylesheet which works really well when you're working with child themes as we are. Okay, I've retained a trailing slash after that. That's good. So now I can just copy this PHP code and use it to replace most of the initial path for my link tag. So, let's save that. Now, let's take a look at that in the browser. So, I am going to head back to the browser page that I had opened with Roux Academy Benefits.
And if I refresh the page, I'll now see my Accordion panel has been added to the page after the text that I put in. So, I can click on Restaurants, Lodging, go back to Transportation. All seems to be working very well. Obviously, we'll need some styling. But before we get to that, let's add in some content. So I'll go back to Dreamweaver, and I have some content already prepared. It's stored within our exercise files. So I go to File > Open, go to Desktop/Exercise Files/ Chapter 8/08_01/accordion panel copy.htm.
Open that up. I'll go into Split view so you can get a better sense of it. And here you can see it's divided into certain areas. The last one, Lodging, even has a few images there. So, I'll just copy this initial text here for Transportation, go to my Events page. And because I copied it from Design view, I am going to paste it in Design view. So let me highlight my Spry Accordion here. I am already in Content 1. So I can select that bit of placeholder text and paste it in my code there.
Now, let's go back, and let's get the next one which is under Restaurants. This time just to do a little variety of things, I am going to go ahead and copy the text in Code view, and following my basic rule of pasting in wherever you copied from. Here is Content 2, the Restaurants, so let's paste that in. Now, I notice that when I copied in my text from above, it didn't bring in a paragraph tag.
So I can quickly adjust that. I'll put my cursor right after the end here and just hit Enter once. That not only creates a new paragraph line with a non-breaking space, but it also wraps the previous text in a paragraph line. So, that's a quick little shortcut. Let me hit my Delete key to go back and get rid of that unneeded P tag. All right. Let's go ahead and get the final option which is Lodging. So, I'm going to just select the first image there to go right down to the code.
Now you want to be sure to get the div that's above that image, and the h3 tags, and then scroll all the way down to the bottom here, and get the closing div as well. There is a couple of divs that are being used here to provide some in-line styles, specifically a margin bottom to separate these two. Obviously, for the final product, you would want to incorporate that into your CSS stylesheet, and not use the in-line styles, but for our purposes, it works. So, I am going to copy that, head over to events.php, and let's scroll down to where Content 3 is.
I am going to click the Delete key to remove it, and now I'll paste in my other content. Now, if we take a look at this in Split view, you will notice that the paths are not coming in correctly. In fact, we need to adjust the paths so that they point to the Roux theme directory. And for that, I am going to go up and since we already have used this code block once, I am going to grab that same PHP bloginfo stylesheet_directory code block.
Copy that, head back down to where the images are, and put it right in front of the first source value, paste that in. Now, we're not quite done, so the bloginfo stylesheet_directory will take us to the roux folder. Now we want to go into the _images folder. So I'll add that to my path and put another trailing slash. Now, this entire bit of code here is really the path that we want in front of the other image as well. So I am going to copy that, go down to fancy_hotel.png, and paste that in. All right.
Let's save that page, and head on over to our browser, where if we refresh the page, we'll see some content added. There is my Restaurant list, and let's check out the Lodging, and there is our hotels. All right. All the content is in place, we definitely need some styling now. Let's go back to Dreamweaver, and I am going to close my Accordion panel copy file. We don't need that anymore. Now, let me go over and reduce both the Insert panel and the Files panel so we can give full focus to our CSS Styles panel.
Now, one thing that I've noticed when working with Spry components, I find that it's actually easier to use the All mode of the CSS Styles panel rather than the more frequently used Current mode. Now, you'll notice right here in the events.php file, if I switch to the All mode, I have a listing for SpryAccordion.css but no style rules. That's because you cannot make modifications to just the events page. You have to go to the index.php page with all of its dynamically related files.
So let's switch to that. And I don't have a events page linked from the navigation anywhere. So when you're working with your pages, the easiest way to handle it is to go back to the browser for just a second, select and copy the URL for the page you want to work with, and then head back to Dreamweaver, and insert it into the location bar and press Return or Enter. So now, I'm working with my Accordion panel right within Dreamweaver, and I have my stylesheet in All mode, and I can expand that. Let's bring the Properties down just a little bit so we can see some of the various properties there.
And we're ready to crawl down the SpryAccordion.css sheet. So, the first thing I'm going to change is the color of the tab that we see here, so the AccordionPanelTab. What I want to do is instead of using this light gray background color, I am going to sample the purple that we see here. So I'll sample that. Now, notice that two of them changed, but we'll get to the one that did not change in just a second. I also want to make sure that the color is white rather than this default black.
So, let's add a color property here, and I'll just type in white. Next up is the one right below that which is the AccordionPanelContent. And as you can see, the content here under the Transportation tab that's open kind of goes right up to the edge of the screen. So, that's because there is 0 padding by default. Let's make that 10 instead of 0. Next up is the next rule which handles the properties for the Accordion panel tab when the panel is actually open, and I am going to just keep it consistent.
Let's make our background color the same, sample purple there, and let's go ahead and add a color: white just to be sure. Next, let's do AccordionPanelTabHover, and I am going to scroll up the page just a little bit, so I can pick up the orange here that's in the R. So I'll click into the color swatch and go over and sample that color. So, let's scroll down all the way to the ones that are close, and you can see the orange appearing there. Now, we have to do the same thing for the Open panel. So we'll scroll back up and sample that orange. All right.
We are almost done, we have two more rules to do here, and that is the AccordionFocused section. So, if you notice that when I roll over and if I click on anything, once the Accordion panel has focused, it has a whole other set of colors. And we want to of course make that conform to what we've been using. So here I have my background color. I'll sample again the purple. Let's add the color property, and set that to white, and we're just going to duplicate that exact same thing for the next rule, color: white.
Okay, so let's take a look. There is all the various panels seem to be working correctly and they definitely are fitting within our style. Now, there is one last style issue to address that's not related to the Spry components. If you expand the Restaurants panel as I have here, you can see the list of Restaurants is pretty bland, and honestly, it's not terribly readable. If we take a look at the code on the events.php page for that section, we can see that definition lists are used.
Rather than just generically style all definition lists for the site, let me show you how to target a specific template page. So, I am going to go back to my index.php file, and let's enter into Live code. And I am going to go up to the body tag. Let me just choose on the tag selector here so it will go right below that. Now, you'll notice there are number of classes that are dynamically added by WordPress, there is page, there is page-id-55, there is page-template, and there is also a page-template-events-php.
That's the exact class that we need in order to target our definition list CSS rules. So, with that selected, I'll copy it, drop out of Live code, go back to our style sheet, and I am going to add about three rules. I am going to put them down towards the bottom here. Let's put them in between the footer and the video container. So first, I'll put in a dot for the class and then paste in my selector, and we want to first style the definition list itself. And all we need to do here is just add a margin-left of 20 pixels.
Next, we'll target the definition term which is the first phrase in the definition list, and let's make those stand out a bit with a font-weight of bold. Now, let's do the definition data with our same selector and set that padding so that there's some separation on the bottom and on the left. So, padding: 0 0. Let's do 15 pixels for bottom and 20 pixels for the left. Okay.
I'll save all of our files. Let's go up to File > Save All Related Files to make sure we've got everything, and I'll click on Design view. And now you can see the results of our little bit of styling. Well, that looks pretty good. Now, let's head back to the Dashboard and make it easy for us to access our page by adding the homecoming page to our sidebar menu. So go to Appearance > Menus, and here is Homecoming is coming! I'll just add that to the current menu and save the menu. So now when we take a look at the page, we'll see that there, and I can click on it, and there's my Accordion panel looking pretty good.
All of the techniques we used in this lesson can also be applied to Dreamweaver's other Spry layout tools, including tabbed and collapsible panels.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.