So, having discovered the new fork of Wordpress ClassicPress recently, I thought I would take it for a spin to see what the hype was about! ClassicPress is a pared down bloatless version of Wordpress which retains the old TinyMCE editor instead of the Gutenberg in Wordpress, and allows developers more freedom to build sleek fast sites using it.
Here are a couple of press releases from the ClassicPress team
Improved Security
Concerned about security? ClassicPress has a “security-first” approach. No matter how shiny or exciting a new feature is, if it’s not secure, it won’t be added to the platform.
Less Bloat
We believe that powerful does not need to mean code-heavy. We’ve trimmed unnecessary plugins and features from ClassicPress core, and continue to actively seek smart ways to reduce code bloat.
Block-free
Choose the development path that works best for you. With the flexibility and stability that ClassicPress provides, you have the freedom to create a solution that meets your unique needs.
So I decided to take a look and see how we can use ClassicPress with an original HTML theme/PSDs etc, rather than a prebuilt theme and I customised one of my earlier Wordpress bare starter packs to work with ClassicPress, to take a look, and then go a bit further and use an original HTML/PSD (if necessary) theme with it.
Just a Few Languages
First of all, at the time of writing only Installatron have a hosting install option, so it all has to be done manually, by first creating a Database and uploading the ClassicPress files to the server, renaming wp-config-sample.php to wp-config.php and entering the database details in there. When browse to the URL we will get a screen like the one above. If you speak fluent USA, or indeed one of the other more obscure languages you’ll be fine!
The setup screen will appear and allow us to fill in the details for the install. Typically these will be from the database you created, in most cases the database name will be the same as the database user, with the password and email added in.
A few minutes later we are ready to go, and logging in will show us a bare bones admin, with TinyMCE editor and no plugins whatsoever. I switched to my Bare ClassicPress starter which is rather sparse, but that’s for a reason, so we can put in any styles, javascripts, fonts and anything else we need to build up the site.
So to start with we have just got the standard default page and nothing else. Some adjustment needed.
Adding a few pages, a Menu and setting a Home static page currently gives us just an itsy bitsy menu that doesn’t exactly smack you in the face as a work of unadulterated design genius! I mean, you can hardly see it! So we need to liven that up a bit, and in this case, to keep it short, well just use good old Bootstrap! Here’s what we do.
1. If we head over to GetbootStrap and grab the CSS and JS files, (V 4) and then we get Popper from, well Popper.JS!
With the Bare ClassicPress starter we can just put the Bootstrap css and Bootstrap and Popper js files in the respective folders which are already there (css folder is called “styles”), then import the bootstrap css file into the themes default css file (style.css) along with Google font Work Sans.
@import url(http://fonts.googleapis.com/css?family=Work Sans);
@import url(‘styles/bootstrap.css’);
(Just replace the original css boots-bones file)
2. Then we add a couple of lines to the functions.php file to register the js files, like so:
wp_enqueue_script( 'naked', get_template_directory_uri() . '/js/popper.js', array(), BARE_VERSION, true ); wp_enqueue_script( 'naked', get_template_directory_uri() . '/js/bootstrap.min.js', array(), BARE_VERSION, true );
(The add action is already there)
3. That’s the js files done, now we also need a Navwalker for the menu, so I just grabbed one from Github at https://github.com/wp-bootstrap/wp-bootstrap-navwalker and placed it in the theme folder root, then we write a few more lines to register that in functions.php, like below.
/show bootstrap walker on Theme
require_once('class-wp-bootstrap-navwalker.php');
// Theme navbarResponsive function
function wp_theme_setup(){
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'Bare ClassicPress' ),
'secondary' => __('Secondary Menu', 'SUBITEMS'),
) );
}
//action hook to load navbar after theme loads
add_action('after_setup_theme','wp_theme_setup');
4. Now we just want to change the code in the header to suit the new style we are going to use, so I grabbed the nav from another Bootstrap theme I made with VueJS Gridsome and changed the “g-link” tags to “a” tags, so we have a new nav layout in the header, in to which we can put the Navwalker code. Essentially, we just remove the ul’s an li’s from the Bootstrap nav html code, and replace with the Navwalker php code, which is:
(wrapped in php tags)
wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker() ) );
Which should work whichever type of Bootstrap nav is used, just put that in place of the ul’s and li’s (or a tags). I also put in a dummy logo instead of the text in navbar-brand with php echo, after creating an images folder in the bare-classicpress theme, and uploading it:
Also, I used Fakerpress to generate some more dummy posts/pages in addition to the ones I had already made, https://en-gb.wordpress.org/plugins/fakerpress/
So now we are ready to take a look at the new nav layout, and see if it is any better than the original!
Look’s a little better to me!
So that’s a quick look at ClassicPress with the Bare ClassicPress starter, although there are others which can be used. There is still a lot more that needs to be done here though, which probably involves digging in to the theme template files to customize them a bit for various layouts, but if you want a bare theme with no bloat or plugins and no Gutenberg then ClassicPress seems like a good place to start.
The Bare ClassicPress starter can be found on Github at:
https://github.com/xhostcomweb/bare-classicpress.git
And ClassicPress from https://www.classicpress.net/
You can grab the Bootstrap html code from the /components/ folder in this Vue Gridsome starter
https://github.com/xhostcomweb/vuewp-gridsome-scss-bootstrap-starter.git
But change the g-link tags to a tags! If you enjoyed this post, why not check out this one on Wordpress Dynamic Content!
Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!
No comment yet, add your voice below!