Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding Spry accordion panels

From: Dreamweaver and WordPress: Core Concepts

Video: Adding Spry accordion panels

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.

Adding Spry accordion panels

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.

When you save any file with a Spry component, Dreamweaver lets you know that it needs to copy some files to the site root. So, let's okay that. Now, I am going to go back into my Files panel, expanding that, and show you what just took place. Here is a folder just added. Let me collapse blog, so we can see better what's going on for SpryAssets. If I expand that, we'll find two files, one for the CSS and one for the JavaScript. I want to copy both of these files.

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.

Show transcript

This video is part of

Image for Dreamweaver and WordPress: Core Concepts
Dreamweaver and WordPress: Core Concepts

55 video lessons · 51347 viewers

Joseph Lowery
Author

 
Expand all | Collapse all
  1. 4m 7s
    1. Welcome
      58s
    2. Using the exercise files
      1m 54s
    3. A word about updates
      1m 15s
  2. 15m 28s
    1. Overview
      1m 51s
    2. Creating the database and the initial site
      3m 45s
    3. Configuring WordPress
      5m 54s
    4. Establishing a Dreamweaver site
      3m 58s
  3. 20m 18s
    1. Accessing dynamically related files
      4m 12s
    2. Filtering files
      4m 20s
    3. Following links
      4m 15s
    4. Employing Live Code
      2m 54s
    5. Enabling site-specific code hinting
      4m 37s
  4. 21m 8s
    1. Adding blog posts
      4m 55s
    2. Editing blog posts
      3m 20s
    3. Adding new pages
      2m 59s
    4. Including images
      6m 59s
    5. Adding videos to posts
      2m 55s
  5. 18m 12s
    1. Understanding WordPress structure
      3m 52s
    2. Activating a theme
      7m 21s
    3. Setting up a child theme
      6m 59s
  6. 1h 29m
    1. Updating the page structure and the background
      12m 53s
    2. Working with web fonts
      4m 3s
    3. Styling a header
      11m 48s
    4. Adding header functions
      7m 40s
    5. Setting up content columns
      10m 9s
    6. Changing the main content
      5m 17s
    7. Managing the content code
      4m 48s
    8. Customizing the sidebar
      10m 32s
    9. Styling search
      7m 8s
    10. Working with search text
      5m 49s
    11. Integrating the footer
      9m 40s
  7. 27m 18s
    1. Setting up media queries
      6m 12s
    2. Customizing for tablets
      12m 19s
    3. Building smartphone layouts
      8m 47s
  8. 23m 28s
    1. Working with categories and posts
      5m 31s
    2. Developing category-driven pages
      11m 22s
    3. Changing headers by category
      6m 35s
  9. 36m 32s
    1. Adding Spry accordion panels
      17m 44s
    2. Working with Spry form validation
      11m 56s
    3. Integrating jQuery functionality
      6m 52s
  10. 11m 7s
    1. Understanding WordPress plugins
      6m 20s
    2. Styling plugin output
      4m 47s
  11. 25m 44s
    1. Customizing the Dashboard
      6m 52s
    2. Working with WordPress functions
      8m 7s
    3. Including administration interactivity
      10m 45s
  12. 13m 10s
    1. Setting up the data in WordPress
      2m 17s
    2. Adding dynamic data from WordPress to your web pages
      10m 53s
  13. 11m 38s
    1. Modifying general settings
      4m 12s
    2. Setting up users
      3m 11s
    3. Restricting access to specific WordPress pages
      4m 15s
  14. 26m 38s
    1. Exporting and importing WordPress files
      7m 9s
    2. Backing up and restoring the database
      8m 10s
    3. Transferring files
      6m 3s
    4. Testing and fine-tuning
      5m 16s
  15. 18s
    1. Next steps
      18s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver and WordPress: Core Concepts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.