Use a WYSIWYG editor to embed WP into your design (19 posts)

  1. pezastic
    Posted 11 years ago #

    Step number 6 should read:
    6. Back to your frame-based page, in design mode. Place your cursor just to the right of "content". Switch to code mode.

  2. zadu
    Posted 10 years ago #

    Yay! Dissent! Pluralism!
    I would never ever use a WYSIWYG editor or frames, but I'm all for letting people choose their own way and keeping fanatics of any kind at bay. Good stuff. It might be useful to tell people which particular editor these instructions refer to. If anyone flames you saying that editor sucks, don't argue as they're probably right (imho), but the point is WP is for everyone.

  3. Anonymous
    Posted 10 years ago #

    hear hear! that should be put in capital letters at the top of every page on this forum. WP IS FOR EVERYONE. Not just Firefox users who code pro-standard CSS and hack the core files for fun. A lot of people here seem to forget that.

  4. pezastic
    Posted 10 years ago #

    Those steps are the same for both FrontPage and Dreamweaver. Also, I should have mentioned that the index.php to use is the WP 1.2 default.
    I stand by my opinion that WYSIWYG editors are useful for people who have limited time and knowledge, but still want to put up a decent looking website. I spent a few hours yesterday going through the "purist" websites introduced on the "Your WordPress" forum. Is it me, or do they all look pretty much the same? Perhaps design takes a backseat when pretty code is a priority.
    Don't get me wrong. I'm not knocking the strict coders, who painstakingly work to make certain their code is pretty and valid. In fact, I admire them. I wish that I could do what they do. I just don't see a lot of variety in their website design. However, I believe as time goes on their designs will become as pretty as their code. I appreciate the fact that there are a lot of people here that help me with both design and code.

  5. Root
    Posted 10 years ago #

    Yeah it sucks doesnt it. Web Standards CSS designs like Stop Design . Are really boring. Life is just too tedious. Yawn. Ho hum.

  6. Anonymous
    Posted 10 years ago #

    I TRULY appreciate this post and instructions. I'm going to try this tomorrow. I've been going at this the wrong way. I was contacting the Frontpage folks about how to fit a blog in a Frontpage homepage; but they keep saying "yes Frontpage has a blog service; you need to use a web host with Sharepoint services". I was pulling my hair out. Then I realized I'd better come here. I didn't even need to post to find the answer. Thanks so soooooo much!

  7. Anonymous
    Posted 10 years ago #

    Hey all, I tried this EXACTLY to the T - with one exception - I used an inline frame. Would that be ok?
    After I set this up, I got a document not found error on my webpage (I used Frontpage, btw). And some weird message at my mysite.com/wordpress/ page.
    Any ideas?

  8. gankaku2
    Posted 10 years ago #

    Hmmm....ok I will try again.

  9. Anonymous
    Posted 10 years ago #

    i used inline frames to embed my index.php , however, the password no longer work for protected entries after i embed. Anyone knows how i can resolve this?

  10. Anonymous
    Posted 10 years ago #

    what about to use htmlarea ?

  11. wassimk
    Posted 10 years ago #

    htmlArea has been done already: http://mudbomb.com/archives/category/software/

  12. TaseerDC
    Posted 10 years ago #

    Just out of curiousity--can I create an entire page in Dreamweaver (say, with images and text formatting, etc.,), and then apply your steps to it?

  13. Anonymous
    Posted 10 years ago #

    I'm a newbie with WP and this post is very useful for me. I have a problem: Using DreamWeaver, when I put the cursor to the left or right of the "content" and go to the code of my framed page I'm just editing (coping) the code of the main frame... and no information of the other frames are there... no size of the other frames either, if I do what the tutorial says I just have a php file without frames. How could I do to put all the info about frames in the php file? Am I doing something wrong?
    Thank you, sorry for my english.

  14. sha
    Posted 10 years ago #

    hi there,

    i might be missing something, but i dont see any steps except for this,

    "Step number 6 should read:
    6. Back to your frame-based page, in design mode. Place your cursor just to the right of "content". Switch to code mode."

    is there a full post/article on how to embed wp using dreamweaver- i have not found it yet!


  15. jdrez
    Posted 9 years ago #

    Is there a tutorial or different thread for this? I would really like to know how to embed WP into my existing site.

  16. moshu
    Posted 9 years ago #

    Instead of reviving a totally dead-end topic, you could have searched:

  17. pezastic
    Posted 9 years ago #

    Actually, that thread references a tutorial that talks about embedding WordPress in CSS-based sites, similar to how all themes are set up in the first place.

    It does mention table-based sites, but doesn't provide a step-by-step way for using WYSIWYG editors like FrontPage and Dreamweaver to embed WP into that kind of site, as this thread once did.

    Actually, the referenced steps in this thread were for WP 1.3. I will update the steps for WP 2.0 and post them here.

  18. pezastic
    Posted 9 years ago #

    I changed my mind. It certainly was a lot easier to wrap a table-based website around WP v1.3 than v2.0 with a WYSIWYG editor. I started to make a list of steps, but after the 15th item I decided I had bitten off more than I could chew.

  19. pezastic
    Posted 9 years ago #

    Okay, I changed my mind again after I combined a few steps. It's a mess, but it worked for me. Here are the steps to embed WP v2.0 into a table-based page, using a WYSIWYG editor, like FrontPage or Dreamweaver:

    1. This process was done using the WordPress Classic theme, so change over to that theme before beginning.  You will need to alter the header.php and footer.php files from that theme.  You can use local copies and then upload them after saving, overwriting the files online.  Or, you can alter the files online and save them, using an ftp client and text editor.
    2. Create a frame-based page, in design mode, where you want WordPress shown. Make sure to have a fixed width cell on the left and on the right, but no fixed height. (Mine have a fixed width of 115 pixels. I have my site navigation buttons in the left column.) Between the left and right column, you should have a big column with no fixed width or fixed height. This is where the WordPress stuff will go. Optionally, you can have cells above and below the content cell. They can have a fixed height (mine are 50 pixels), but no fixed width. You can also have some corner cells on all four corners, with fixed width and fixed height. (As you can probably guess, my corner cells are 115 x 50 pixels.) Why do some cells have no fixed height and/or fixed width? That is so everything will display correctly at different resolutions, because not everyone uses the same resolution as you do.
    3. Under design mode, type "content" in your content cell.
    4. Under design mode, place your cursor just to the left of "content".
    5. Switch to code mode. Highlight and copy everything from that point up to, and including, the line just below the “<head>” tag.
    6. Open up the WordPress Classic theme header.php file (found in …/wp-content/themes/classic) in code mode (or a text editor). Highlight the "</head>” and “<body>" lines. Paste what you copied from your frame-based page into the header.php file.  You can also remove the line beginning “<h1 id="header…” at this time, if you don’t want your weblog name to be displayed.
    7. Highlight the first line in the header.php file that begins “<!DOCTYPE html…” and remove it.  IE will display the page fine with the tag, but Firefox borks it.  (Your table-based page isn’t in compliance anyway, so there’s no need for the tag to be there.)
    8. Highlight and cut the CSS file link, from the line that begins “<style type=…” through the line two down “</style>”.  Paste it just above the “</head>” line.  Save and upload the header.php file to the WordPress Classic theme directory.
    9. Back to your frame-based page, in design mode. Place your cursor just to the right of "content". Switch to code mode.
    10. Highlight and copy everything from that point down to the bottom.
    11. Open up the footer.php file from the aforementioned WP theme, in code mode. Highlight the lines at the bottom, which show the "</body>" and "</html>" tags. As before, paste what you copied from your frame-based page into the footer.php file.  Save and upload the footer.php file to the WordPress Classic theme directory.
    12. If you used the sizes in step 2 for your table-based page, change the selector that positions the sidebar to the following:
    #menu {
    background: #fff;
    border-left: 1px dotted #ccc;
    padding: 10px 30px 10px 10px;
    position: absolute;
    right: 135px;
    top: 80px;
    width: 12.5em;
    13. One last thing, you need to either disable permalinks, or some of the WP links won’t work with your existing paths.  (I’m sure there’s an easier way to fix this, but I don’t know the solution.)

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.