User Tools

Site Tools


ce4_102

A Beginner's Guide to CE4 Publishing and WordPress

Flexibility is the keystone upon which The Turning Gate's plugins are built, and CE4 Theme for WordPress introduces a slew of new possibilities for creating your photographic website.

CE4 Theme for WordPress can be used to supplement a CE4 Pages-based website with a blog, or users may opt to forego using CE4 Pages altogether, instead using CE4 Theme for WordPress as the site's core.

Goals

In this tutorial, you will learn how to create a website using WordPress and CE4 Theme for WordPress, and then how to publish image galleries using CE4 plugins for Lightroom.

The intent is to have our website and blog run by WordPress, with matching image galleries managed from Lightroom.

We'll be using the following plugins, available individually or discounted in the CE4 Blog & Galleries Bundle:

* The bundle also includes CE4 Viewport Sizer, not discussed in this tutorial.


A Brief Introduction to the Web Module

In Lightroom, at the top click on “Web”. Welcome to the Web module. A few points of interest:

  • On the right, at the top, find the Layout Style control panel. Here you may choose to work with one of your installed web engines. If you have installed any TTG web engines, you will find them here.
  • On the left, in the middle, find the Template Browser. When you've customized your design, you can use the Template Browser to save your customizations as a preset for later use.
  • On the right, at the bottom, find the Upload Settings control pane. Never, ever use it. Lightroom's upload functionality is shaky at best, and this is absolutely not the way to manage your website. So, now that we know it's here, we can ignore it all the better.
  • On the right, beneath Layout Style and above Upload Settings are located several control panels: Site Info, Color Palette, Appearance, Image Info, Output Settings. These house the controls for the active web engine and will change depending upon which engine you've selected from the Layout Style list. Within each of these panels, TTG plugins organize related controls into “control groups” easy to identify by their yellow headings.
  • The control panel titles – Site Info, Color Palette, Appearance, Image Info, Output Settings – are misleading. They are set in stone within Lightroom and cannot be changed, so we ignore them. It's the yellow control group headings which provide meaningful insight into the controls there.

Requirements for Use

The shop page for each TTG plugin lists out the system and software requirements for running the web engines, as well as the hosting requirements for publishing content to the web. Pay close attention to these requirements when purchasing. For hosting, we recommend a web server meeting the following bullet points:

  • Linux OS
  • Apache server
  • PHP 5.2.6 or newer
  • WordPress 3.9 or newer, a free download from WordPress.org.

If you are yet in need of hosting, or would like to move to a new host, we recommend Bluehost. Fair prices, great support and everything you need for publishing from TTG plugins.


Creating a Workspace

To make the most of CE4 plugins, you should properly setup your workspace. We've got a dedicated tutorial on just how to do that, so go check it out and then come back here to continue.

Tutorial: Creating a Workspace


Do I need or should I use CE4 Pages?

You can if you want to, but CE4 Pages is not required by this tutorial. There are reasons that you might want to, discussed here:

My Blog is Not My Home: CE4 Pages + WordPress


Step 1: Installing WordPress

The first step is to install WordPress into the root of your site, such that the WordPress Home page will also be the Home page of your website. This is basic stuff, so I'll not go into it here. You may wish to see our recommendations on WordPress installation, or just hit the standard WordPress installation documentation.

While we're here, save yourself some trouble:

  1. Create an empty .htaccess file in the root of your site. Change its permissions to make the file writeable.
  2. Make the /wp-content/ folder and its contents writeable as well.

For some stupid reason, the WordPress installation guide doesn't do a very good job addressing these points. But taking these steps early on will prevent our having to return here later because of errors thrown during WordPress configuration.


Step 2: Designing in Lightroom

With WordPress idly installed on our server, we turn our attention to Lightroom's Web module. Here you can spend as much or as little time as you like designing your site. We're going to be exporting CE4 Auto Index first, but you may wish to perfect your design in CE4 Theme for WordPress, as that will be the base of the site.

Either way, it's not important; you can use our technique for sharing templates between plugins to get your designs in sync.

So spend some time getting to a design that you're happy with. One way or another, end up with CE4 Auto Index loaded in Lightroom's Web module, then move on to step 3 when you're ready.


Step 3: Enabling PHPlugins in CE4 Auto Index

Now we have CE4 Auto Index loaded into Lightroom's Web module, and we have customized the look of the page to our liking. The next thing to do is enable PHPlugins. This is optional, but highly recommended as it will allow us to create better integration between our blog and galleries.

If you're new to this, don't worry. And don't be afraid of PHPlugins. They're relatively simple, we're going to hold your hand through the technical bits, and most of what we're going to be doing here is copy-and-paste. Now let's get to it.

In the Site Info control pane of CE4 Auto Index, locate the PHPlugins control group and enable the “Enable PHPlugins” check-box.

For now, it's okay to leave the server path blank.

On the lefthand side of the Web module, access the Template Browser. Click the '+' button to create a new template and give it a suitably informative name, like “My Website - AutoIndex”. We will be saving additional templates later, so you might like to create a “My Website” folder to keep them in.

Now EXPORT the page. You will be prompted for save location and asked to give it a name. For the sake of ease, save to your Desktop and name the export “galleries”.

On your desktop a new folder – /galleries/ – will be created.


Step 4: Upload the /galleries/ folder

This step is easy. Upload the /galleries/ folder now on your desktop to your server. It should be uploaded to the same location as your WordPress files, like this:

Just so you know, this folder is super important! We're going to be coming back to the /galleries/ folder throughout this tutorial.

Now we have two things to do while we're here:

  1. Change permissions on the /galleries/ folder to make it writeable. Depending on your server, we'll want permissions to be either 777 or 755. This is so that we can publish to the folder using CE4 Publisher later on. If you're not sure whether to use 777 or 755, then just pick one; it can be changed later if there's a problem. If hosting on Bluehost, use 755.
  2. Rename the /galleries/phplugins-sample/ folder to /galleries/phplugins/. To be very clear, that's the “phplugins-sample” folder inside of /galleries/, being renamed to “phplugins”, pictured below.

Step 5: Revisiting PHPlugins Setup

Now that your /galleries/ folder is in place and your /phplugins/ folder renamed, we can fetch the server path for our PHPlugins. This is what ties everything together so that we can do amazing things later.

In your web-browser, ping the path.php file located in /galleries/phplugins/path.php. You accomplish this by targeting the address:

http://yourdomain.com/galleries/phplugins/path.php

This will return a server path to this location, something like:

/home8/campagna/public_html/phplugins

Copy this path in its entirety from your web-browser, then paste it back into Lightroom under the PHPlugins settings:

After pasting this into Lightroom, revisit the Template Browser. Right-click the template you saved previously (do not left-click it first!) and “Update…” the template with the new information.

There is no need to replace the /galleries/ folder now online with an updated version, though you can if you want to. However, do make sure that this information is included in everything that you design henceforth. That includes exports from CE4 Theme for WordPress, CE4 Gallery, and any additional instances of CE4 Auto Index that you may create.

If you're copying template settings between engines, this information should travel to the destination templates now that we have it saved, assuming you use the newly saved auto index template as your source.


Step 6: Uploading and Activating CE4 Theme for WordPress

Now that our /galleries/ folder is online, we're finished with CE4 Auto Index, at least for the moment. Turn your attention back to CE4 Theme for WordPress.

If you need to get your WordPress design synced with your work in CE4 Auto Index, remember our our technique for sharing templates between plugins.

Most important, be sure to include the PHPlugins path above!

When ready, EXPORT your theme and save to your desktop. Name the folder whatever you'd like; it's not important. Just keep in mind that whatever you configure within the WordPress admin – menus, widgets, theme options, etc. – WordPress will associate with the folder name of your theme. If you later switch to an updated theme with a different folder name, then WordPress will treat it as a new theme; if you later upload an updated theme with the same folder name, then WordPress should carry over your existing settings. To wit, save the theme using a folder name that you're comfortable keeping for the long-term.

Following export, use an FTP client to upload the theme to your server, then activate the theme via the WordPress admin per documentation.


Step 7: Imbue Your Menu with the Power of MAGIC

By now, you may be wondering why all this nonsense with PHPlugins?! It will shortly become clear.

First, let's dive into the WordPress admin, Appearance > Menus section:

Using the provided interface, create a new menu. For now, we'll add just two items; you can add more later as you develop your site structure. Using the Custom Links area –

– create items for:

URL:   http://yourdomain.com/
Label: Home
URL:   http://yourdomain.com/galleries/
Label: Galleries

The “Home” link brings us back to the front page of your WordPress blog/site, and the “Galleries” link takes us to our auto index.

Under the “Manage Locations” tab, assign your newly created menu to the “Site Navigation” item.

Press SAVE.

Now visit your site's front page, and you should see that your new menu has replaced the menu that was exported from Lightroom.

Click on the “Galleries” link to visit your auto index, however, and you will see that your menus are now out-of-sync. Let's do something about this … something … magical.

We are going to utilize PHPlugins to pull the WordPress menu into all of our non-WordPress pages, including the Galleries page, all of our future image galleries, etc. This will allow you to use the WordPress admin to manage the navigation menu for your entire site, and it will serve to tie your site's various pages – those managed by WordPress and those which are not managed by WordPress – together in a very fundamental way.

Using your FTP client and a plain text-editor, open the /galleries/phplugins/phplugins.php file for editing.

Scroll down past the line which reads “// SET USER FUNCTIONS BELOW”. Below that you will find a number of sample functions which are presently inactive. Ignore them.

In this same general area, though, copy-and-paste the following:

// GET FUNCTIONS FROM WORDPRESS
define('__ROOT__', '/path/to/wordpress'); // SET PATH TO WORDPRESS
require_once(__ROOT__.'/wp-includes/version.php'); global $wp_version;
require_once(__ROOT__.'/wp-load.php');

// SITE-WIDE NAVIGATION FROM WORDPRESS
function ttg_header_navigation( $style, $path ) {
	if (G_STYLE != 'CE4-WORDPRESS') {
		echo '
<div id="navigation-container" class="navigation-container clearfix">

	<div id="navigation" class="block-id navigation clearfix">
	<div class="mantle clearfix">
		<div class="core clearfix">
		<div id="navigation-background">

		<div id="r2d2-menu" class="clearfix">
		<ul id="pull">
			<li><span>&nbsp;</span></li>
			<li><span>&nbsp;</span></li>
			<li><span>&nbsp;</span></li>
			<li><span>&nbsp;</span></li>
			<li id="open-nav"><a href="#r2d2-menu"><i class="fa fa-reorder"></i></a></li>
			<li id="close-nav"><a href="#"><i class="fa fa-times"></i></a></li>
		</ul>
		';

		wp_nav_menu(array( 'theme_location' => 'site-navigation', 'container' => false, 'menu_id' => 'nav', 'menu_class' => '', 'fallback_cb' => false, 'walker' => new My_Walker_Nav_Menu() ));

		echo '	
		</div><!-- #r2d2-menu -->

		</div><!-- #navigation-background -->
		</div>
	</div>
	</div> <!-- #navigation -->

</div> <!-- #navigation-container -->
		';

		return false; // Replaces normal menu for non-WordPress pages
	}
	return true; // WordPress returns normal menu
} // END

There's just one thing you need to do beyond simply pasting this in. This is line 2:

define('__ROOT__', '/path/to/wordpress'); // SET PATH TO WORDPRESS

We need to change the /path/to/wordpress so that it is correct for your site.

Get that same path we used for PHPlugins. For me, that was:

/home8/campagna/public_html/phplugins

For you it will be something different, obviously. We need to edit the tail-end of the path so that it points to our WordPress installation, not the phplugins folder. So I trim it back to:

/home8/campagna/public_html/blog

(Ending with “blog”, because on my site, WordPress resides in the /blog folder.)

I then update line 2 of our PHPlugins function:

define('__ROOT__', '/home8/campagna/public_html/blog'); // SET PATH TO WORDPRESS

Save the file.

Now turn your attention back to your “Galleries” page in the web-browser. Refresh the page, and the navigation menu should now be the menu that you setup with the WordPress admin.

From now on, any galleries or gallery indexes that you upload to your site should automatically pull the navigation menu from WordPress. And when you update the menu from within WordPress, those changes will automatically be reflected throughout your site.

IT'S MAGIC!!


Step 8: Setup CE4 Publisher

At this point, it's pretty much business-as-usual. If you're already familiar with using the CE4 plugins, then you can probably fly on auto-pilot. For the rest of you, I will brush over the final steps in the process.

We need to install TTG BE and CE4 Publisher, so visit these pages for specifics:

The /ttg-be/ folder should be installed alongside your /galleries/, mingled into your WordPress installation:

As usual, set the API key, setup the plugin within Lightroom, authenticate, etc. That's all covered in the documentation, so I'll not repeat it here.


Return to Lightroom's Web module.

We already have our main “Galleries” page. That's the auto index we exported previously as the /galleries/ folder. We need now to create an auto index template for publisher to use when creating album sets.

This can be exactly the same as your previously exported page, or you can make any necessary adjustments. The most important thing is to ensure that the PHPlugins setup is filled in with the server address from Step 5 above.

EXPORT the auto index, save to desktop using any folder name you like. Upload this newly exported folder into:

/ttg-be/templates/autoindex/

Return to Lightroom's Web module.

Load CE4 Gallery, dupe your auto index configuration using the template sharing technique, then finish your design for a gallery template. EXPORT. Again, name this whatever you like.

Upload the newly exported gallery folder into:

/ttg-be/templates/gallery/

You're now all set to start using Lightroom's Publish Services to publish Albums and Album Sets!


Step 10: Further Develop Your Website

You're now ready to run free. You've setup your entire publishing platform. Here are some ideas how to proceed …

  • In Lightroom, build albums and start publishing galleries via Publish Services.
  • In WordPress, create pages and add them to your site navigation menu.
  • In WordPress, start blogging.
  • In WordPress, install the Contact Form 7 plugin and create a Contact page; add it to your site navigation menu.
  • Create a Google Plus profile and verify your site for Authorship.

Most of all, have fun. Your website will be what you make of it, and you should definitely enjoy carving out your own space on the Worldwide Web.

Best of luck!


ce4_102.txt · Last modified: 2014/10/15 15:28 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.