Wordpress as CMS allows easy setup and management of websites and corresponding news sections. The new Scope Publisher Plugin allows to push your Scope selections directly to your website news section. No need to lose time with copying and pasting.

The following steps prepare a Wordpress (WP) System to automatically receive/create blog posts based on Scope selections.

The connection between Wordpress and your Scope Box ist done via REST API. Therefore your Wordpress must support REST API.

Required Information

To Scope

My WordPress URL

From Scope

Activation Key

Scope checks your REST API

Ensure that the REST API on your WP instance is up and running. To do this, simply

open https://YOUR_INSTANCE/wp-json using any browser.
If a JSON response is printed in your browser, the REST API of your WP instance is ready. It will look something like this:

Don’t get a response? Check your Wordpress version, you need to be on at least version 4.7

Install the Scope Plugin

Open the Wordpress Administration Interface (https://YOUR_INSTANCE/wp-admin) and sign in as a user with "admin" permissions.

In the Wordpress Administration Interface, open the "Plugins" section and click the "Add New" button.

In the search bar (right corner) select Keyword search and search for “Scope Publisher” and find the plugin from Team Scope.

Install the Plugin directly by selecting "Activate"

Enter the Activation Key

Open the configuration page of the Scope Publisher Plugin. Paste the activation key that you've received from us into the textbox and click "Activate". If you do not yet have an Activation Key please request one here - by providing your Box URL & your WordPress URL:

Request WordPress Activation

After entering your key you will see the following message:

Formatting

The plugin comes with basic formatting in HTML. You can adapt the HTML to fit your Corporate Design or Website Style. Please feel free to adapt the HTML while considering the basic elements - which are represented as variables in curly brackets:

{{url}}
{{comment}}
{{selectionComment}}
{{title}}
{{publisherName}}

The formatting follows some rules which must be considered.

Handling of the selection comment: {{selectionComment}}
Consider all available articles within the selection - represented as {{#articles}} - do not remove
Handling of article details from an article inside of the selection.

{{url}}
{{title}}
{{publisherName}}

Check for images - represented as {{#hasImage}} - do not remove
If an image is available the format and size of the article image can be adjusted by using parameters for the image link

<img src="https://cy1er32c.cloudimg.io/crop/600x375/tjpg/{{imageUrl}}" />
The format can be extended with compression quality "tjpg.q85" e.g. 85% quality

Check for comments - represented as {{#hasComment}} - do not remove

Place the {{comment}}

You can create your own HTML using tables or div or further css rules if you just consider the basic elements as described above.

To complete the setup on our side we then need the HTML from you to add it to your configuration. Whenever you wish to change something we must adapt it in the plugin for you.

Simple HTML

<p>{{selectionComment}}</p>
{{#articles}}
    <h6>
        <a href="{{url}}">
            {{title}} ({{publisherName}})
        </a>
    </h6>
    {{#hasImage}}
        <img src="https://cy1er32c.cloudimg.io/crop/600x375/tjpg/{{imageUrl}}" />
        <br>
    {{/hasImage}}
    {{#hasComment}}
        {{comment}}
    {{/hasComment}}
    <br><br>
{{/articles}}

Advanced HTML with divs for styling

Live Preview: https://demo1.thescope.com/2018/10/06/deutsche-messe-1/

<div class="selection">
    <div class="header">
        <img src="{{boxPhotoUrl}}" />
        <h2>{{selectionComment}}</h2>
    </div>
    <div class="articleContainer">
    {{#articles}}
        <div class="article">
            {{#hasImage}}
                <a href="{{url}}">
                    <img width="250px" src="https://cy1er32c.cloudimg.io/crop/600x315/tjpg.q85/{{imageUrl}}" />
                </a>
            {{/hasImage}}
            <div class="titleAndText">
                <h3>
                    <a href="{{url}}">
                        {{title}} ({{publisherName}})
                    </a>
                </h3>
                {{#hasComment}}
                    <p>{{comment}}</p>
                {{/hasComment}}
            </div>
        </div>
    {{/articles}}
    </div>
</div>

Basic HTML

Live Preview: https://demo1.thescope.com/2018/05/09/demo-box-1-118/

<h1>{{selectionComment}}</h1>
{{#articles}}
    <h3 style="font-family: Helvetica, sans-serif; font-size: 18px; line-height: 22px; font-weight: 700; Margin-top: 0; Margin-bottom: 0">
        <a href="{{url}}" style="color: #3A3C3E; text-decoration: none">
            {{title}} ({{publisherName}})
        </a>
    </h3>
    {{#hasImage}}
        <img src="https://cy1er32c.cloudimg.io/crop/600x375/tjpg/{{imageUrl}}" />
        {{#hasComment}}
            <p style="padding-right:25px; padding-top: 5px; font-family: Helvetica; font-weight: 400; font-size: 14px; color: #606060;">
                {{comment}}
            </p>
        {{/hasComment}}
    {{/hasImage}}
    {{^hasImage}}
        {{#hasComment}}
            <p style="padding-right:25px; padding-top: 5px; font-family: Helvetica; font-weight: 400; font-size: 14px; color: #606060;">
                {{comment}}
            </p>
        {{/hasComment}}
    {{/hasImage}}
{{/articles}}

How can I configure the Scope-to-WordPress plugin?