This post talks about some of our experiences automatically publishing pages from a SharePoint Publishing site, to this WordPress site. We used our Content Publisher For SharePoint product to do it – no manual cleanup required!

When it comes to styling content, SharePoint publishing pages have some interesting traits. We have designed Content Publisher For SharePoint to handle everything SharePoint can throw at it. We end up producing clean and accessible content WordPress Content that fits perfectly with your WordPress themes and branding.

Here’s an example of one of the SharePoint Publishing Pages that we use for testing.

After just one click..

We went from this..

Publishing Pages in SharePoint can use various styles.

.. to this..

A SharePoint Publishing Page published to SharePoint

The publishing process automatically applies the WordPress theme, giving a simple and consistent look to the page.

The technical details

For graphic designers looking to create custom themes, here are our observations about how the SharePoint Rich Text Editor applies Markup Styles and Styles and how we handle the content by default.

Markup Styles

Markup Style HTML Tag and CSS Class Our Suggested WordPress Style
Heading 1 <H1> .ms-rteElement-H1 <h1>
Heading 2 <H2> .ms-rteElement-H2 <h2>
Heading 3 <H3> .ms-rteElement-H3 <h3>
Heading 4 <H4> .ms-rteElement-H4 <h4>
Colored Heading 1 <H1> .ms-rteElement-H1B  <h1>
Colored Heading 2 <H2> .ms-rteElement-H2B <h2>
Colored Heading 3 <H3> .ms-rteElement-H3B <h3>
Colored Heading 4 <H4> .ms-rteElement-H4B <h4>
​Horizontal Rule <hr> .ms-rteElement-Hr  <hr> or <!– more –>
​​Paragraph <P> .ms-rteElement-P  <p>
​Callout 1 <div> .ms-rteElement-Callout1 Theme-specific
​Callout 2 <div> .ms-rteElement-Callout2 Theme-specific
Callout 3 <div> .ms-rteElement-Callout3 Theme-specific
Callout 4 <div> .ms-rteElement-Callout4 Theme-specific

Styles

Style HTML Tag and CSS Class Our Suggested WordPress Style
Normal <span> .ms-rteStyle-Normal No additional style
Highlight <span> .ms-rteStyle-Highlight Theme-specific
Byline <span> .ms-rteStyle-Byline Theme-specific
Tagline <span> .ms-rteStyle-Tagline Theme-specific
Comment <span> .ms-rteStyle-Comment Theme-specific
References <span> .ms-rteStyle-References Theme-specific
Caption <span> .ms-rteStyle-Caption Theme-dependent , or .wp-caption

Other observations

Each piece of text entered into SharePoint Publishing pages often starts with unicode ​character &#8203;.

SharePoint distinguishes between storage and view of publishing pages. When it comes to storage, we’ve made the following notes:

  • SharePoint’s Reusable content functionality creates a <div> element with the id “__publishingReusableFragmentIdSection”, with contents referred to like the following example: <a href=”/ReusableContent/1_.000″>a</a>.
  • Web parts are inserted with HTML code similar to the following:  <div class=”ms-rtestate-read ms-rte-wpbox”><div class=”ms-rtestate-notify ms-rtestate-read f5c7ee81-0080-4518-9a03-7ce8a3ddb6dc” id=”div_f5c7ee81-0080-4518-9a03-7ce8a3ddb6dc”></div><div id=”vid_f5c7ee81-0080-4518-9a03-7ce8a3ddb6dc” style=”display:none”></div></div>