Wordpress and text formatting.

Discussion in 'Web Design and Development' started by definitive, Nov 3, 2011.

  1. definitive macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #1
    So I've started working on a template for someone. I've pretty much converted a regular html based template I've had in to a WP template, and so far it's working. Only issue I'm having is text formatting. Whenever I create a new page, and want to input the text through Pages editor, it doesn't take on my CSS file's characteristics. I have to manually switch to HTML view mode, and input the class tags in so that the paragraphs (ex: <p class="...">), etc., will format themselves to the appropriate settings. I don't use too much custom formatting throughout the template, so I was wondering if I should just set the CSS text settings throughout the theme itself, and would that auto format things when I'm using the Page editor.
     
  2. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
  3. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #3
    That's what I've made the template in. I'm going to be handing the template over to my client. They want to be able to add several other pages by themselves in the future, so I need a way where they'll be able to add the text to the page, and not have to dig in the code to add custom classes. They'd simply enter a heading like Welcome, highlight it, and set it to H1 with bold. The issue I'm having is that the text that WP's page editor generates doesn't use custom tags like I do when making custom pages on my end, so their text won't get color formatting, or a custom selected font.

    Is there some kind of an admin plugin which would give more options to the editor, or should I just code the CSS file differently to set the standard p, h1-6, ul/li, etc. tags to be what I want them to be right from the start?
     
  4. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #4
    You said you are using Wordpress. Unless you have completely changed the platform, this is a default option.

    Then change the default CSS. Assuming your client wants some semblance of uniformity, this won't even matter.
     
  5. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #5
    I am using TextWrangler to create a new template to be used with Wordpress. What I'd like to know is if I set the basic text formatting in the main style.css file, will it translate to the Page/Post/Comment WYSIWYG editor.
     
  6. Hansr macrumors 6502a

    Joined:
    Apr 1, 2007
    #6
    No it won't the admin panel has it's own stylesheet. Check the the documentation it's clearly explained there.
     
  7. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #7
    do you by any chance know what i should be looking for in the documentation? i've done some search through google, and came up empty handed.
     
  8. blue22, Nov 8, 2011
    Last edited: Nov 8, 2011

    blue22 macrumors 6502a

    blue22

    Joined:
    Oct 15, 2010
    #9
    you're overcomplicating things way too much...

    In short "no" it will not.

    The "style.css" file only controls how the published page or post will look like, not the WYSIWYG editor itself within the WordPress admin.

    If you want to change the default WP admin CSS rules then, just as the poster Hansr mentioned previously, you can do so here. But you really don't want to do that because:

    1. you're only creating extra and unnecessary work for yourself & potentially your client to manage and keep updated.
    2. You could potentially destabilize the WordPress install as a whole unless you're completely sure of what you're doing.
    3. the default WYSIWYG editor looks and works perfectly as it is. :cool:

    Instead, what you need to get into the habit of doing is previewing the post/page edits using the "preview" button under the publish heading in the WP editor as shown below:

    [​IMG]

    Also, look at WP's info on how to create & manage pages to get a better understanding of how to create page templates for themes.




    This is normal and virtually the best way to implement your specific CSS class rules within WP's admin content WYSIWYG editor. This what is called an "inline formatting" of a particular style rule to be applied within the page/post content area.




    Yes, do it this way. But no, the Page editor will not show all the formatting rules declared within the style.css file until you "preview" the live page.

    If you don't want to declare any specific CSS class="xxx" attributes within the body content for the page/post and just want to have, for example, the default "H1" tag (or for any HTML formatting tag such as "H2", "H3", "P", "OL", "UL", etc...) to present a particular but default text format style without needing to use a class= attribute every time within the WYSIWYG editor then you must declare all the relevant styles for each of the HTML Formatting Tags you plan on using within the "style.css" file to have those CSS rules applied by default.




    Two part answer:

    1st bolded area - You accomplish this by setting the CSS style rules for all relevant HTML Formatting Tags you want to pre-determine by default within the "style.css" file, as I already mentioned once before above. Then your client can simply just use the WYSIWYG editor within WP to create, format and preview their new page/post content.

    2nd bolded area: I think you're simply approaching things in the wrong manner. You need to to first declare all the standard formatting style rules within the "style.css" file before you can see them implemented on the published or preview version of the page. If you're going to use specific inline style rules then you must use the class="" or style="" tag attributes (via the HTML editor) when editing the page/post content. Othewise, if you're using the "Visual editor" panel you'll only see the default style rules for the common formatting tags, but not fully until you "preview" the page/post after saving your changes. Once you've applied all the rules to the style.css file, try reviewing your content this way instead:

    1. Select the "HTML editor" within the admin panel of the page/post to see the code side of the content you're adding/formatting and make your adjustments to the content.
    2. Then click the "preview" button after you've saved your changes to see what the page/post will look like live.
    3. repeat steps 1 & 2 until you get the desired results, then click "publish" to make the page go live.

    Hope all of this helps, good luck!
     
  9. rmcwhae macrumors newbie

    Joined:
    Jul 2, 2009
    Location:
    Canada
    #10
    Try this:

    Create a functions.php file in your theme folder (or use the existing one) and add this line:

    Code:
    add_editor_style('style.css'); //use front-end styles in WordPress visual editor
    Where style.css contains the front-end styles (p, h1, h2, etc.)

    More info: http://digwp.com/2010/11/actual-wysiwyg/
     
  10. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #11
    thanks everyone who contributed with the help. looks like i'll have some reading and practicing to do over the weekend. :)
     

Share This Page