Use a WYSIWYG editor to embed WP into your design

  • Being a newbie, it took me a long time to figure this out. But, it really is a simple process. Before doing this, it is important to have a backup of the original WordPress index.php file. Here’s the simple procedure:
    1. 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.
    2. Under design mode, type “content” in your content cell.
    3. Under design mode, place your cursor just to the left of “content”.
    4. Switch to code mode. Highlight and copy everything from that point up to and including the line that begins with “<body…”.
    5. Open up the WordPress index.php file in code mode. Highlight the “<body>” line. (I also highlighted the two lines beneath it, which display the blog name, as I didn’t want that shown. But that is up to you.) Paste what you copied from your frame-based page into the WordPress index.php file.
    6. Back to your frame-based page, in design mode. Place your cursor just to the left of “content”. Switch to code mode.
    7. Highlight and copy everything from that point down to the bottom.
    8. Back to the WordPress index.php file, 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 WordPress index.php file.
    9. One more time back to your frame-based page, in code mode. Highlight and copy everything from, and including, the line that says “</head>” up until the line just below the “<head>” tag.
    10. One last time back to the WordPress index.php file, in code mode. Highlight the “</head>” line. Like twice before this, paste what you copied from your frame-based page into the WordPress index.php file.
    I hope those steps can help someone save some time and headaches.

Viewing 15 replies - 1 through 15 (of 19 total)
  • Thread Starter pezastic

    (@pezastic)

    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.

    [wp-politics-mode=”on”]
    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.
    [wp-politics-mode=”off”]

    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.

    Thread Starter pezastic

    (@pezastic)

    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.

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

    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!
    Lisa

    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?

    Hmmm….ok I will try again.

    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?

    what about to use htmlarea ?

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

    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?

    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.

    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!

    thanks!
    sha

    jdrez

    (@jdrez)

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

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Use a WYSIWYG editor to embed WP into your design’ is closed to new replies.