Converting a WordPress theme to Coppermine

[Gizmo]

This little tutorial is to explain how I've converted WordPress themes for use with Coppermine. You will need to have, at the very least, some basic understanding of html & css and know what php code looks like. You won't need to know php but you will have to remove it from the WordPress files to create the html layout. Before you start, I recommend that you check out these links to familarize yourself with editing and creating themes for CPG.

Making a brand new theme, where to start? - http://forum.coppermine-gallery.net/index.php?topic=24056.0
My experience in Theme'ing - http://forum.coppermine-gallery.net/index.php?topic=24469.0
Tools recommended by the devs - http://forum.coppermine-gallery.net/index.php?topic=31423.0

I use FireFox with the Web Developer Extension, Crimson Editor, Aardvark and FileZilla. Last but not least, read the manual - http://coppermine-gallery.net/demo/cpg14x/docs/index.htm and search the forum.

While there may be other ways to perform this conversion, this is the method I've chosen as it's also taught me how WordPress themes work. The WP theme that I'll be converting here, Green Flower, is a simple two column theme with a header and footer. The main section contains a left-hand menu with the main content on the right. You can download the theme from here - http://wpthemes.info/green-flower/.

Once you download the theme, you'll notice in the folder a bunch of .php files along with a style.css file and an image folder. There may be other files but they aren't necessary for the conversion. The main files we're interested in are the index.php, header.php, footer.php, sidebar.php and the style.css. I'm not a php programmer so I won't go into how WordPress works but what needs to be done is to piece the 4 php files I've listed into a single file. Open the index.php file and you'll find "get" functions for the header, footer and sidebar along with some other php and html code. Paste the contents of the header.php file into the index.php file at the positon of the <?php get_header()?> function and then do the same for the footer.php and sidebar.php files. After doing this, you'll have one large index.php file which you should rename and save as template.html. Create a new folder for the coverted Coppermine theme and copy this file to the new folder.

Using another Coppermine theme as a template such as the classic>template.html, open it and copy the information above and including the </head>. This is used to replace respective lines in the WP template.html.

Either load the WP theme in your WordPress blog or go to http://wpthemes.info/green-flower/ and open the Green Flower WordPress theme in the demo. Using FireFox and the Wed Developer Extension, find out what <div>s, <ul>s  and other elements that are controlling the menus, main contents, header and footer. You'll want to leave these elements in the template.html we're converting such as the <div id="container">, <div id="header">, <ul id="navigation">, etc. I think you get the point. All the php code such as <?php include_once(TEMPLATEPATH."/intro.php"); ?> can be deleted from the file but remember to leave the corresponding closing element tags for the ones we left in. Once you've removed all the php code, you should be left with a skeleton template.html file which you then add in the Coppermine tags to generate the gallery. These tags are {CUSTOM_HEADER}, {GAL_NAME}, {GAL_DESCRIPTION}, {SUB_MENU}, {SYS_MENU}, {ADMIN_MENU}, {GALLERY}, {CUSTOM_FOOTER} and {VANITY}.

At this point you will need to copy the theme.php, style.css and images folder from the classic theme to the new converted Coppermine theme. You then need to copy all the images (you might not need them all but it's easier this way) from the WordPress theme folder to the converted images folder. With the recent WP themes that I've converted, I've left the WP style.css file intacted and renamed it to style_wp.css and this also needs to be copied to the new converted theme folder so you will have 2 style.css files. Make sure to add the <link rel="stylesheet" href="themes/greenflower/style_wp.css" type="text/css" /> line to the template.html header. Leaving the WP style.css file intact makes it easier if you decide to change the WP theme then all you have to do is copy the customized style sheet over to Coppermine. You'll need to remove any selectors from the classic style.css file that are also present in the style_wp.css since this will cause problems when the page loads.

At this point you should have a working theme but the styling will be off. You need to use the Web Developer Extension to find which styles you want changed and what if any code in the theme.php needs to be tweaked. You can find more information on this in the above links.

I've uploaded the converted GreenFlower theme to use as a template. You can find it here - http://forum.coppermine-gallery.net/index.php?topic=38506.0. While this may sound like a lot of work, it's actually very easy and only you only need to take the time to test the theme throughly in as many browsers as you can.

[miz]

Hi, I just wanted to post a big thank you for this tutorial and also a link to the site which i have integrated. This might help for others who are trying to integrate their sites with the wordpress themes.
http://www.jessas.com/

[Zyama]

Hello.
Thank you for this tutorial. I have a little question, when i use {SUB_MENU} and {SYS_MENU} after {ADMIN_MENU} {GALLERY} - links do not appear. Where there is a problem can be?
Thank a lot.

[Joachim Müller]

Think of the {GALLERY}-token as a separator. Stuff that comes after it needs to be defined in pagefooter instead of pageheader. Please start a new thread for your individual issue, posting a link to your gallery and attaching your custom theme (zipped) to it.

[Zyama]

Thank you very much, did it like you wrote and problem solved. You can delete my messages.

[ericsoup]

Thank you for this information.  It's incredibly helpful.  The only thing I'm stumbling over is getting the WordPress php to run inside of the template.html.    Is this possible?

I have WP at the root of my domain, and the Coppermine Gallery installed in a directory called /photos.

What I'd like to do is have the dynamically generated content from WP appear on the Coppermine page.  (such as the dynamically generated navigation bar.)

Thank you.

[Joachim Müller]

Displaying content from Wordpress on Coppermine-driven pages or vice versa is not the subject of this thread. Locking.