Dreamweaver Wordpress

VideoWordPress offers powerful content management for your website while Dreamweaver CC enables easy design and coding-a potent combination.

DesktopServer Premium edition version 3.3 now includes extended support for Adobe Dreamweaver’s Live View. No other web server provides extended Live View support directly for WordPress template files in Dreamweaver. At best, you can only use WordPress with Dreamweaver’s Live View on just the index.php file in your WordPress’ site root folder. But DesktopServer takes Live View further by sensing Dreamweaver’s built in browser. DesktopServer directly renders WordPress template files (and their include file fragments) for more visual feedback and to assist in faster theme design & development. Originally introduced in Dreamweaver CS4, Live View (formerly Live Data in CS3) provides a more modern embedded web browser. Dreamweaver optimizes web development by allowing designers to work on their website files in Code View while seeing a real Live View of their site in Dreamweaver’s Design View window. For an abridged overview, check out the video below.

Hi WordPress WordPress is very flexible to design a website and you can design website with help of plugins. WordPress is user friendly for beginners you can create any type of website. Support for Dreamweaver Live View (Premium) Full Panic Coda Support (Premium) Easy Custom Configuration with Blueprints; Easy Live Site Deployment (Premium) Multisite Support (Premium) Create and Manage an Unlimited Number of WordPress sites (Premium) Expanding Library of exclusive Design-Time Plugins; Top-Notch Support Team. Open DreamWeaver MX. Click on Site and choose New Site. Click on the Advanced tab. For site name, enter a phrase that describes your site.

The Live View feature is a much-needed update to Dreamweaver’s original Live Data mode in Dreamweaver CS3. Although DesktopServer’s extended features will also work with Dreamweaver CS3’s older, dated embedded browser (aka Live Data mode), WordPress designers will benefit the most from the latest version of Dreamweaver CS5.5 which includes a cutting edge WebKit based browser rendering engine as well as support for multi-monitor workspaces. In this guide, I’ll show you how to streamline your design environment for working with Dreamweaver and WordPress.

Dreamweaver wordpress integration

When you start DesktopServer Premium version 3.3 for the first time or after selecting the first option to “Stop or restart web and database services”, you will see a new checkbox that is titled “Enable Dreamweaver support”. When turned on, DesktopServer will perform extended rendering when viewing WordPress template pages directly in Dreamweaver. That is to say, template page files will render in Live View that exist in your wp-content/themes/[active theme] directory where [active theme] is your currently selected and activated WordPress theme folder. DesktopServer will also automatically create a Dreamweaver compatible site definition file when creating a new website, copying an existing website or importing a website archive (zip file). You can find the file in your website’s folder named as “dreamweaver.ste”. (i.e. ../Websites/www.example.dev/dreamweaver.ste). When exporting your website, DesktopServer will omit this file so you won’t have to worry about security risks (as the file might pose a security risk by revealing your server’s file paths to potential hackers). If you transfer your files to your server by another means, be sure to omit this file or simply delete it after importing your site into Dreamweaver as it isn’t needed after import.

If you haven’t created a website yet, simply follow the directions in the post Getting Started with DesktopServer. Next, locate the dreamweaver.ste file in Finder (Mac) or Explorer (Windows) and double-click the file. Dreamweaver should start and automatically import your site and display the Manage Sites window or alternatively, you can import it using Deamweaver’s Site ? Manage Sites pull down menu, followed by clicking the Import button. You can delete the dreamweaver.ste file after importing it into Dreamweaver. The imported site definition file will automatically configure Dreamweaver to use DesktopServer as a testing server, pre-configured for a MySQL and PHP setup and to support Dreamweaver’s Live View mode. From the Manage Sites window, you can click the Edit button to view the configuration options or define additional servers to sync with.

Enable Code Hints
Adobe Dreamweaver CS5 now includes PHP code hints optimized specifically for WordPress. To enable this feature, all you need to do is enable the Dreamweaver code hints configuration file. Just select the pull down menu Site ? Site-Specific Code Hints to bring up the Site-Specific Code Hints dialog box. You will see a drop down combo box labeled “Structure” from which you can select the WordPress option. Ensure that the site root is selected (as shown in the image on the left) and click the OK button. Dreamweaver will automatically scan your site and provide code hints for clue insights into WordPress’ Template Tag API and proper syntax. To use code hints, simply begin typing a few letters of the WordPress template tag inside a valid PHP block followed by pressing Ctrl+Space bar. For example, with the cursor position right after the underscore in the code block <?php get_ ?> press the Ctrl+space bar key combo and a popup list will appear containing a matching set of WordPress template tags that begin with “get_”, such as get_header, etc. Code hints can eliminate a lot of guess-work and speed your development process by providing an instant reference without having to look up template tag syntax on the web.

Using Dreamweaver and WordPress
Now that Dreamweaver is properly configured, you can jump right into design and editing. Use the File window/panel in Dreamweaver to select the WordPress website you wish to edit. In Dreamweaver CS5.5’s default workspace, you can find the panel in the lower left hand side with a drop down to select from a list of sites. Select the site you have just imported and navigate the file tree (click the thumbnail to the left and see #1). To view your site as a visitor would, go to the root of your website and locate the index.php file. There are many index.php files in a typical WordPress installation, but we are concerned with the one that lives in the root of your website. It will be in the same folder as your wp-config.php file. Open the file and switch your editor to Split or Design view mode using the toolbar. Next click the Live View button and you should see your website displayed in Dreamweaver’s Design View area (see #2 in the image for the Design View area). Unlike a real web browser, the hyperlinks in Design View are disabled and the render is only an estimation of what a visitor would see. Use the Preview icon (the earth globe icon) on the toolbar to launch your web browser and see your site in an actual web browser.

DesktopServer’s real power is the convenience feature of viewing your theme files directly [and] …using Dreamweaver’s Inspect toolbar button to analyze elements and their corresponding code.

DesktopServer’s real power is the convenience feature of viewing your theme files directly. For instance, you can open your theme’s header file directly by navigating to your active theme’s header.php file. The file would be located in a sub-folder of your active theme in the wp-content/themes folder path. In a typical web server, opening your theme files directly would produce an error and Live View would fail to deliver anything useful. DesktopServer compensates by acknowledging Live View and attempts to apply your style.css file to your template files dynamically as well as attempting to load various WordPress modules to assist you with design time feedback. While not perfect, this can greatly reduce the amount of task switching you perform while editing your site. Simply keep in mind that your CSS rules are influenced by element parent and child hierarchies; so not everything may render unless you address the element directly to apply a given CSS style. For instance, the sidebar.php file may not display a background color because the file itself is an include file intended to be embedded inside another file like page.php. Alternatively, you can open the page.php file, single.php, or your theme’s index.php file and see how content is rendered. Another convenience feature is the ability to click various elements in Split view’s Design View area which will cause Dreamweaver to position the cursor in Code View as close as possible to the code that produces the actual output (see #3 in the thumbnail). Especially powerful is using Dreamweaver’s Inspect toolbar button to highlight elements and analyze their corresponding code. This can help you learn what various WordPress template tags output when passed different parameters. As well as isolate and highlight problems or areas of interest. You can view most changes quickly by simply clicking in the Design View area with Live View turned on or by saving your file (Ctrl+S on Windows or Command+S on Mac) and clicking the refresh icon on the toolbar. To enable Dreamweaver’s native CSS panels, you may need to attach the style.css file as a Design Time style sheet. Design-Time style sheets only apply while you are working in the document. Place your cursor in Code View and use the pull down menu View → Style Rendering → Design-time to attach your theme’s style.css file.

The actual content that is displayed in Dreamweaver’s Live View is determined by the currently selected front page. You can change the content output to test different post scenarios by using WordPress’ admin menu under Settings ? Reading. Select a different front page and that content will be displayed in Dreamweaver’s Live View rendering. The currently selected content can also influence your CSS rules as WordPress’ template tags are often used to output a value for the body or parent element IDs and class tags in HTML (often the case with the post_class template tag). Be sure to set the front page accordingly to avoid confusion. I found this to be especially true when viewing a single post as the front page but loading a multi-column page template in Dreamweaver (and vice versa). Most everything else rendered accurately, but margins abide by the actual output WordPress produces and any CSS rule that binds to the post_class template tag can change the page’s appearance. Thankfully, you can verify what class and id tags are present along with all output by quickly doing a ‘view source’ using Dreamweaver’s Live Code button.

An alert message maybe displayed about dynamically related files not resolving. This is because Dreamweaver doesn’t understand WordPress’ ability to mask URLs with permalinks. You can safely dismiss this message or switch permalinks in WordPress’ admin menu via Settings -> Permalinks and selecting the default option.

You can make dozens of changes to customize and craft your own personalized theme files and view the results quickly with this setup. Development is faster now that you have your WordPress website loaded locally inside Dreamweaver. This guide just scratches the surface to help you get started with a streamlined design and development environment. DesktopServer Premium edition allows you to take your WordPress designs further by unleashing the power of Dreamweaver’s integrated development environment. Now you can customize the look and feel of your WordPress powered websites and view the results even faster.

As the Founder of ServerPress, LLC and creator of DesktopServer, Stephen J. Carnam continues to invent new ways to improve developer Workflow through technology. As a huge Advocate of Open Source Software, he promotes Creativity, Community and Collaboration.

This is ONE way to convert an existing static/Dreamweaver site to WordPress. You could just create a Page for every webpage on your existing site, but this would not be harnessing the power of WordPress. The method below allows you to convert an existing site but still have the power of adding future content without revisiting your menus each time. It provides a structure for content, but also harnesses some of the automation possible with WordPress.

If you don’t have a firm grasp of the WordPress meaning of Categories, Tags, Pages, and Posts, then visit Definitions of Common WordPress Terms.

Step 1: Use Your Menu to Determine Categories

The menu in your Dreamweaver site is probably a good place to start with in deciding what Categories your site should have. With some exceptions each current top-level menu item might become a Category. For instance look at this menu from the Registrar’s site:

  • Home
  • Contact Us
  • Calendars
  • Transcripts
  • Commencement
  • Registration
  • Bachelor’s Degrees
  • Diplomas
  • Student Resources
  • Faculty Resources
  • University Catalog

This list covers the main areas of their site. As they think about what articles they might write in the future, they can easily map each article into a single one of these areas. However not all of these should become Categories. Home and Contact Us are single pages – that is a hint that they are probably static pages, not truly categories. Unless you can imagine writing an article that would belong as part of that menu item, it is probably a static page. It will still be in your menu, but probably not be a Category.

The list also contains the item “University Catalog”. This is actually a link to a different, although related, site. It also would not be a category, and there is a strong argument that it doesn’t even belong on the menu. The home page text and/or the footer menu is a good place to mention sites that are related to yours, but not part of the navigation. It is confusing for folks when they select an item from the main navigation on the site and end up on a different site with different navigation.

So with these deletions the proposed category list for this site would be:

  • Calendars
  • Transcripts
  • Commencement
  • Registration
  • Bachelor’s Degrees
  • Diplomas
  • Student Resources
  • Faculty Resources

You might even choose to replace Student and Faculty Resources with a single item, Resources, and then tag the items in them as “students” or “faculty” or both. If NONE of the posts in these areas are for both faculty and students, then there is a stronger argument for having two categories. If many of the posts are for both, then the argument would be that it should be called Resources and the landing page can sort out the two divisions.

Once you have decided the Categories appropriate for your site, proceed to the next step.

Step 2: Create Pages for Each Menu Item

Some of these pages will be true static pages (Home, About Us, Contact Us are good examples). The rest of them will be a “Landing Page” for each Category. This landing page will explain the Category and then, using the “magic” in Step 4, dynamically list the titles of each Post in this Category. If your staff writes an addition article in this Category, it will magically show up here without you doing anything.

To create a page go to your Dashboard and select Pages > Add New. Add general content that you think helps the user understand whether they are in the right section. If they must do a certain thing, like get an account, before any of the other information makes any sense, it would be useful to put that information here. Also general information that affects the whole category, like News, warnings about outages, announcements of upcoming deadlines – these transitory elements also belong on this cover page. Keep it short and informative, and do not add general information that doesn’t help the reader, such as what you do behind the scenes. Just tell them what they need to know. And of course you will need to keep it up to date.

Step 2b: Create Primary Menu

Once you have all the landing Pages created for your Menu, or at least some of them, create your menu. You can always modify the menu later. Go to your Dashboard and select Appearance, Menus.

  1. Next to Select a Menu to Edit. Select Main (Primary Navigation) and press the Select button
  2. From Pages on the left, check the check box for a Page that you already created.
  3. Select Add to Menu
  4. Repeat this for several or all Menu items.
  5. Using the area on the right, Menu Structure, drag and drop the menu buttons into the Order you want.
  6. Modify the Menu button label by select Page next to the menu item and typing the correct label into Navigation Label.
  7. Repeat 5,6 until your menu is complete
  8. Select Save Menu button

Step 3: Create Posts with Categories

Copy Content from Old site to New site

Now you are going to create a Post that belongs under one of your Menu categories. The two-browser-window method will help with this technique.

Browser Window 1: Open a browser window and go the Dashboard of your new WordPress site. Select Posts, Add New.

Browser Window 2: Open a new browser window and go to your old (non-WordPress) site. Find some content on a webpage of the old site that you want to appear under one of your main menu items in the new site. Then do these steps to get the content into your new site:

  1. Highlight and Copy (Ctrl-C or ⌘C) the text from the browser window.
  2. Go to your browser window with the WordPress Dashboard and make sure you’re on the Edit Post window.
  3. Paste (Ctrl-V or ⌘V) the text in the main window of Edit Post.
  4. Cut (Ctrl-X or ⌘X) the Title of the article and paste it into the Title bar above the main editing window.

Clean up the content and Add Images

Headers

For instance, make sure all your main Headers are h2, sub headers h3 and below etc. (The Title will appear as h1 in most themes so don’t use it within your post or page). Your visual editor has tools for this, but if you don’t see all the tools shown below, click the orange-circled “kitchen sink” icon to show you everything, including the green-circled text tag selector.

Images

If there are images you must move them to WordPress. Do this by copying from your original site and adding to the WordPress media center, then placing the image in your post/page:

  1. Go to Browser Window 2 (your original website) where it is showing the image
  2. Right click on the image in the browser and select Save Image As… and save to the desktop or other memorable place
  3. In Browser Window 1 (new site) go to your post, select Edit, and remove the existing image that you previously copied over . Leave your cursor where the you want the new image to appear.
  4. Select Add Media from the tool bar at the top of the edit window.
  5. Select Upload files and then either drop the images in or browse for them. Once the image is uploaded the Media window will display.
  6. Put a good description of the image into the Alt Text area at right.
  7. Select the alignment (left, right, etc) and the size (thumbnail to full size).
  8. Select Insert into Post
  9. Repeat for all images in the site.

Select a Category and Publish

When you’re happy with the text, select the appropriate Category from the category list at right of the editing window. The next window down on the right is Tags. Add any tags at this time as well. Finally at the bottom of the right side of your Edit Post page is Featured Image. Set a Featured Image if you really want to wow folks. Featured Images are used differently in different themes, but for the Western theme they are used on Searches and Category Lists. If you don’t see them go to your Dashboard and select Genesis, Theme Settings, Content Archives and select Include Featured Image.

Now press Publish.

Repeat this for a few more articles if you like.

Now create magic with step 4!

Step 4: Add shortcodes to Associate Pages and Posts

In Dreamweaver sites you had sub-menus for most of your menu items. In WordPress, although you can have sub-menus off the main menu, the method described below allows you to grow your site without fussing with your menu. See below what using this feature looks like on our site. The circled links with bullets are automatically added by the shortcodes. If all your posts have “Featured Images”, then you’ll see the images as shown below, otherwise you can simply use a bulleted list.

Activate the Plugin

First make sure this capability is activated on your site: go to Dashboard > Plugins. When the plugins page comes up, scroll down to Live Shortcodes. Activate it if you have not already.

Dreamweaver Wordpress Theme Erstellen

Let’s use the example of a recipe site to explain how to add a Category List to your menu landing page. Imagine that your menu has these links: Entrees, Soups, Salads, Desserts. If we are working on the Desserts landing page we now want to list all the desserts that we have recipes for. The landing page will describe general information about the desserts – maybe that they serve four unless otherwise noted, etc. Then add a Heading on the page that says something like “Related Posts” or “More Articles on this Topic” or, for this specific recipe site, maybe “Our Yummy Desserts”.

Add Shortcodes

Notice that there is function at the top of your editing screen called “<>Add Shortcodes”. With your cursor right after the “More Articles on This Topic” header, click Add Shortcodes.

When the shortcodes page comes up, select the Latest Posts item. Make these selections to start:

Dreamweaver Wordpress
  • List Style > Unordered List (use “None” if using images)
  • Display Thumbnail > Disable (or if your posts have Featured Images, display these using “Very Small”)
  • Number of Posts > 20 (this is the max and will display as many as you have up to 20)
  • Choose the Category of this menu item under the Display Posts from Selected Categories
  • You can also use tags to refine your list of categories. Alternatively use tags instead of Categories.

Easy Wordpress Websites

Dreamweaver Wordpress

Notice that as you make these choices the resulting look is displayed to the right. The titles of the posts you created in step 3 should show up.

Customize Shortcodes Display

Dreamweaver

Now get just the display you want. For instance go to Content Options and select Display Post Excerpt. This adds the first few lines of the post to the Title of the post and could help the user decide if this is the post they’re interested in. However it may also be text heavy if you have a lot of items. Also try switching from List style > Unordered List to None and see if you prefer the list with bullets or without. If your posts have Featured images try adding that. Once you have the look you want select the Insert Shortcodes button at the bottom right.

Also see more information about Shortcodes.

Step 5: Create Static Front Page or go blog-style

Your Front Page can be a Page that you create, or it could be a list of your Posts. Blogs often show an excerpt of their posts, with the latest at top. You may wish for your homepage to stay the same and introduce your subject matter. This is commonly done with a Static Front Page. Go to your Dashboard and select Appearance, Customize, Static Front Page and choose which method you wish to use.

If you want a combination of the two, you might try using a list of your Posts as the Front Page, and then adding a Widget Text Block to get some introductory text to show up on the Front Page only. To do this see the next section.

Step 6: Add widgets etc

Widgets are an interesting way to add more functionality to your WordPress site. Review them by visiting your Dashboard and going to Appearance, Widgets. Pick a Widget, then selection a location to put it (this depends on the Theme you are using but Primary Sidebar is a good place to start). Then a dialog opens for you to apply settings. For the Text Block mentioned in Step 5 you’ll need to input the title, the text, and then press the Visibility button to decide where this Widget will appear. Then select Save.