WordPress admin in EPiServer Online Center

This was just made as a demo where I wanted to show how to have the admins of two systems in the same when having EPiServer as main CMS. It’s the same approach as EPiServer themselves has with their EPiServer Commerce module.

What I did was implementing a simple case of integrating the admin of WordPress into EPiServers Online Center.

First we will need a menuprovider to get the menu buttons into the Online Center. This is very straight forward since EPiServer provides the base for this with the MenuProviderAttribute and IMenuProvider interface, more about how to extend the navigation in Online Center.

[MenuProvider]
    public class WordpressMenuProvider : IMenuProvider
    {
        public IEnumerable<MenuItem> GetMenuItems()
        {
            var section = new SectionMenuItem("Wordpress", "/global/wordpress")
                              {IsAvailable =request => PrincipalInfo.HasEditAccess};
 
            var wordpressAdmin = new UrlMenuItem("Admin Mode", "/global/wordpress/admin", "/Views/Shell/Admin/Default.aspx")
                                 {IsAvailable = request => PrincipalInfo.HasAdminAccess,SortIndex = 10};
 
            var wordpressSettings = new UrlMenuItem("Settings", "/global/wordpress/settings", "/Views/Shell/Admin/Settings.aspx") { IsAvailable = request => PrincipalInfo.HasAdminAccess, SortIndex = 10 };
 
 
            return new MenuItem[] {section,wordpressAdmin,wordpressSettings};
        }
    }

As you see in the constructor of the UrlMenuItem there is XPath, for example “/global/Wordpress” as our menu root, present and that is where the menu buttons will appear. After building this you shold have something looking like this:

The menu for WordPress consists of two choices, Admin and Settings. The settings page is just for setting up where the WordPress admin is located on the web, which I put into the following class:

using EPiServer.PlugIn;
 
namespace Barely.EPi.Beta.AddOn.Wordpress.Shell
{
public class WordpressSettings
    {
        [PlugInProperty(Description = "Sets the URL for the Wordpress admin", DisplayName = "WordpressAdmin")]
        public string WordpressAdmin { get; set; }
 
        [PlugInProperty(Description = "Which pagetype to use for Wordpress blog posts",
            DisplayName = "WordpressPostPageType")]
        public string WordpressPostPageType { get; set; }
 
    }
}

The both admin pages has the same base class since they both need access to the settings so this is the WordPressAdminPageBase:

using System;
using System.Data;
using EPiServer;
using EPiServer.PlugIn;
using EPiServer.Shell;
using EPiServer.UI;
 
public class WordpressAdminPageBase: SystemPageBase
    {
        public WordpressAdminPageBase() : base()
        {
        }
 
        public WordpressAdminPageBase(int enable,int disable):base(enable,disable)
        {
        }
 
        public WordpressAdminPageBase(int options) : base(options)
        {
        }
 
        public string WordpressAdmin
        {
            get
            {
                string ret = null;
 
                var ds = new DataSet();
                var dt = ds.Tables.Add("dt1");
                dt.Columns.Add("wordpressadmin");
 
                PlugInSettings.Populate(typeof(WordpressSettings), ds);
 
                if (ds.Tables.Count == 1)
                {
                    if (ds.Tables[0].Rows.Count > 0)
                        ret = ds.Tables[0].Rows[0][0] as string;
                }
 
                return ret;
            }
 
protected override void OnPreInit(EventArgs e)
        {
            base.OnPreInit(e);
 
            MasterPageFile = Paths.ToShellResource("Views/Shared/Site.master");
        }
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            RegisterClientScriptFile(UriSupport.ResolveUrlFromUIBySettings("javascript/system.aspx"));
        }
 
 
        }
    }

The aspx for the settings page look like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Settings.aspx.cs" Inherits="Barely.EPi.Beta.Web.Views.Shell.Admin.Settings" %>
<%@ Register TagPrefix="EPiServerUI" Namespace="EPiServer.UI.WebControls" assembly="EPiServer.UI" %>
<asp:content runat="server" ContentPlaceHolderID="MainContent">
<form runat="server">
<label for="WordpressAdminUrl">URL for Wordpress admin</label><asp:textbox runat="server" id="WordpressAdminUrl" /><br />
<EPiServerUI:ToolButton ID="saveChanges" OnClick="SaveSettings" Text=" Save " runat="server" />
</form>

And the code behind:

using System.Data;
using EPiServer.PlugIn;
using EPiServer.UI;
 
namespace Barely.EPi.Beta.AddOn.Wordpress.Shell
{
public partial class Settings : WordpressAdminPageBase
    {
 
        public Settings()
            : base(0, LoadCurrentPage.OptionFlag)
        {
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            if (IsPostBack)
                return;
 
            WordpressAdminUrl.Text = WordpressAdmin;
 
        }
 
        protected void SaveSettings(object sender, EventArgs e)
        {
            var ds = new DataSet();
            var dt = ds.Tables.Add("dt1");
            dt.Columns.Add("wordpressadmin");
 
            var dr = dt.NewRow();
            dr[0] = WordpressAdminUrl.Text;
            dt.Rows.Add(dr);
 
            PlugInSettings.Save(typeof(WordpressSettings), ds);
        }
 
    }
}

Now we get a page looking like this, with some unmentioned addons, they are a future post.

Now you can set the where the user will end up when clicking on the Admin menu item, but before you can do that we’ll have to make the Admin-page. I did this by just using an iframe and populate it’s source with the provided URL.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Barely.EPi.Beta.Web.Views.Shell.Admin.Default" %>
<asp:content runat="server" ContentPlaceHolderID="MainContent">
<iframe src="<%= WordpressAdmin %>" height="100%" width="100%"/>
</asp:content>

With the following code behind:

using System;
using Barely.EPi.Beta.AddOn.Wordpress.Shell;
using EPiServer;
using EPiServer.Shell;
using EPiServer.Web.PageExtensions;
 
namespace Barely.EPi.Beta.Web.Views.Shell.Admin
{
    public partial class Default : WordpressAdminPageBase
    {
 
 
        public Default():base(0,LoadCurrentPage.OptionFlag)
        {
        }
 
 
    }
}

Now when you click the Admin menu item you should get something that looks like this:

Now you have portal to your WordPress site via EPiServer.

Source code »

About mathias

.Net system developer working mainly with CMS and then foremost with EPiServer. Other areas of interest are jQuery and writting plugins. Otherwise also interested in photography and then playing with my Nikon D70.
This entry was posted in EPiServer, Software development and tagged , , , . Bookmark the permalink.