Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In this course, author Joseph Lowery shows how to combine the utility of WordPress and the power of Adobe Dreamweaver to transition existing websites to the WordPress platform. The course demonstrates how to create new blog posts and pages, customize WordPress themes, and extend WordPress editable pages from within Dreamweaver. It also covers how to add Spry elements, add and customize plugins, and enhance WordPress-stored content with Dreamweaver's dynamic pages. Plus, a chapter on responsive design shows how you can adapt your layouts for tablets and mobile devices.
Once you start working with dynamic applications like WordPress, you quickly realize that the HTML in your source code is only the starting point for what the user sees. Dreamweaver's Live Code feature allows you to explore the server processed code so that you can debug your pages with the final output. To illustrate this, let's take a look at our index.php file one more time. So, here we are in Live view, and let me switch to Split view here so that we can see both the code and the page itself.
The Design side over on the right renders fine, but Code view doesn't really change when we go into Split view, as it's just as minimal as it was before. However, if I go into Live Code--which you see up here listed just to the right of Live view--I'll get the entire page from the DOCTYPE declaration, which I'll scroll to all the way up top, all the way down to the closing HTML tag here at the bottom. Now, let me go ahead and go into Full Code view, so we can explore this a little bit more easily.
Now you may be wondering what's the yellow background all about, and that's to indicate that the page is not editable. So, you can't make any changes in Live Code just like you can't make any changes in Live view, but you can get an awful lot of information from it. With Live Code we can actually pinpoint sections of the page that we want to work with. So, let's say that we want to work with the top section of the page. So, now I'm going to scroll down a bit, so I get to about line 23, and here you see this is where of the body tag begins.
And, as you can see, here are a number of classes set up. There is home, blog, single-author, two-column, and right-sidebar. Let me go ahead and I'm going to go back into Split view, and now I'm going to go to a single page, Recent Post, and I'm going to click the link. In the previous lesson we enabled continuous link clicking, so I won't have to hold down Ctrl or Command key, and that will go to that page.
And now let's take a look in Live Code view, and now on line 26 we see the body class has changed significantly. And now, there are a number of different classes that were dynamically assigned, single, single-post, postid-1, and so forth. Knowing what these classes are named can help you track down elusive CSS bugs when you're trying to fine tune your pages. Live Code can give you a real under the hood peak at your WordPress pages during runtime.
Find answers to the most frequently asked questions about Dreamweaver and WordPress: Core Concepts.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.
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.