Skinner

Step 1 of 4

What is Skinner?

Skinner is a companion tool for Split. It takes your Split theme and applies a custom HTML news layout to your posts. Watch the Split Guide and Skinner Guide first, then load the example skin in the next step or browse more at our main site.

Before you proceed

Split themes are translation-ready out of the box. To keep that working once Skinner swaps in your news layout, it needs your theme's text domain.

Theme text domain

Found in style.css as Text Domain: your-slug. Type it below if you know it.

Not sure? Auto-detect it by selecting the style.css of your WordPress theme folder

Step 2 of 4

Paste your news skin

Paste the full HTML for a single post, including its inline <style> block. Use placeholders like {title}, {content}, {date}, {author}, {featured_image}, {category}, {tags}, and {comments_link} anywhere you want dynamic data. See the full list of supported shortcodes below, or just load the example to get the hang of it!

upload .html

Supported placeholders & aliases

{title} Post Title {headline} {heading} {posttitle}

{content} Post Content {body} {text} {article} {posttext}

{date} Publish Date {published} {pubdate} {postdate}

{author} Author Name {byline} {writer} {postauthor}

{avatar} Author Avatar {authorimage} {profilepic} {avatarurl}

{featured_image} Featured Image {thumbnail} {thumb} {postimage}

{permalink} Post Permalink {url} {link} {posturl}

{comments_link} Comments Link (full) {commentslink}

{comments_url} Comments URL (plain) {commentsurl}

{comments_count} Comments Count {commentcount} {comments}

{category} Category {categories} {cat}

{tags} Tags {hashtags} {tag}

{id} Post ID {postid}

Step 3 of 4

Check the mapping

Skinner guessed a WordPress source for each placeholder. Change any that don't look right. Anything left as Custom Field pulls the data from a post meta key of that same name.

Detected placeholders

Date format (optional)

Leave blank to use your WordPress site's default format. Use PHP date format characters like F j, Y or d/m/Y.

Tag separator

How are tags seperated? (e.g. , or ) (optional)

Tag prefix

Add a prefix before each tag (e.g. # or Tag: ) (optional)

Pagination in index.php & archive.php

single.php extras

Include previous / next post links Adds "Previous" and "Next" navigation links at the bottom of single posts.

Include comments section Loads the WordPress comments template if comments are open.

Your templates

index.php

single.php

archive.php

paste at the end of your theme's style.css

Download the files above and replace the index.php, single.php, and archive.php in your theme folder, then paste the CSS above onto the end of your theme's style.css.