As always, there are most likely more than one way to do something when it comes to web development.

One thing is for sure. WordPress, all fine and dandy as it may be, tends to lean on the plug and play method. Now I'm not saying that if you have a WordPress site whatever method you used to get there - it's a bad one. But what I am saying is the more you may or may not dive into WordPress, you realize along the lines there's room for improvement. Mainly the code, the bloat, the easy out of control issues that arise when you are trying to tame something. Veering off the path on a road less traveled has it's pro's and con's. But in many cases there is a big plus side. In some cases, or also in many cases, it's unavoidable. The bottom-line is this. Whatever it is you are trying to build, whether it's a eCommerce site, a social media platform, a gov or edu site - You gotta keep the end result in focus always. In other words, the reasoning, the functionality, the purpose, the message, the end-user, and the value that your web vehicle upholds is priority. Not the platform, the design (unless it meets the past requirements,) the bells or the whistles, or even how quickly you got there. If it don't deliver and cover what it needs to presenting a end-user value, then it has nothing. That was the short version so without further a due on that issue or the why's of customization let's go forward.

The run down.
CSS is king in WordPress. As is with a lot of other web programs but that will take you somewhere.
Customization is trying to add what you DO need without adding what you DON'T need. So you have to start somewhere and build up from there. You can start by bare blank files with little or no code in them to start a custom theme. Covering the minimum amount of code to run a blank WordPress site. One that I recommend if you don't just use blank files or if this is your first time is: Blankslate.
You can search in your themes search by name, also I recommend you read the page about it. http://tidythemes.com/concept/
You are going to want to install that theme. FTP into your hosting account or SSH. Download a copy of it to edit the files. Then make a Child Theme. Info on how to do that are on the WordPress site here.
Mainly; Install Blankslate, make a copy of Blankslate. Rename the copy folder to Blankslate-child. Change the style.css in the copy to read:

/*
Theme Name: BlankSlate Child
Template: blankslate
*/

@import url("../blankslate/style.css");

Open function.php and add:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');functionmy_theme_enqueue_styles() {wp_enqueue_style( 'child-style', get_stylesheet_uri(),array( 'parenthandle'), wp_get_theme()->get('Version') // this only works if you have Version in the style header);}

Just at the beginning, right after <?php

Additional Option: At the end of your functions.php file paste in:

// Remove p tags from category description
remove_filter('term_description', 'wpautop');
/**
 * Disable the emoji's
 */
function disable_emojis()
{
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('admin_print_styles', 'print_emoji_styles');
    remove_filter('the_content_feed', 'wp_staticize_emoji');
    remove_filter('comment_text_rss', 'wp_staticize_emoji');
    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

    // Remove from TinyMCE
    add_filter('tiny_mce_plugins', 'disable_emojis_tinymce');
}
add_action('init', 'disable_emojis');

/**
 * Filter out the tinymce emoji plugin.
 */
function disable_emojis_tinymce($plugins)
{
    if (is_array($plugins)) {
        return array_diff($plugins, array('wpemoji'));
    } else {
        return array();
    }
}

What that last code does is turn off the 'auto' feature of adding <p></p> into ANY text in your articles or pages. For example, if you type in Hello, most likely it will add somewhere <p></p> in the source code, whether you like it or not. The <p> tag is good, but you do NOT always want text wrapped in a p tag so when you don't it's annoying. Google more about source code control. The next thing is by default WP loads emojis to be used as a inline js load. That's fine if you use them all the time, but it's not fine if you make your user load them all the time. Just turn it off.

Open all the files in the Blankslate-child folder and replace the name 'blankslate' with your name you want to name your theme. i.e., Custom.
Zip the Blankslate-child folder up and give it a name. Go to Appearance in your WordPress site and click Add New.
Choose the zip file you named.
Under themes you should now see your Custom theme.
Make sure that Blankslate is installed on your WordPress site.
To see your new Custom theme click Activate.

At this point although your theme is totally and completely blank, you have created a child theme which means if you update Blankslate it shouldn't ruin your custom theme you are going to work on. You've covered the bare bones breaking free from a canned theme and complete and utter bloat confusion.

Don't panic! I know you're site looks like nothing. That's because it is nothing. Also nothing that have to worry about or get rid of. Fear not. Because the true answer from here is just around the corner.
OK. So where you go from here is a fork in the road. But I'll give you clue.
One. What you want to do is [my recommendation] is BASED on what website you are building, what you want in your custom theme files are - the core bare minimum base to get you there. So. What I suggest is: You are going to highly customize the CSS.style file. This holds the magic to what your theme is and what it will look like. You can add a LOT of key elements just based on CSS. What you want to do is: Put in what YOU MOST DEFINITELY WILL NEED in there BUT leave OUT what you MOST DEFINITELY DO NOT! Remember the key to this who endeavor is to make something special but not something messed up. CSS on a website, especially combined or in one file, can easily get out of control. Beyond that once in production, it's a problem to tame, and it's a problem to simplify. It's easy to keep adding code. But refrain from just pasting code in there if you can and cover a core. Beyond that try to simplify or reuse elements, keep them simple, rather than keep adding. The next thing you are going to need is the core requirements of php code that is custom to the files that make up your 'website' or theme. More on that later.

Let's build a Header. The Header part of our website.
Insert Headers and Footers plugin.

But for now: Do you plan on adding a custom logo into your header of your website or do you plan on just using straight text for your website header?

If the answer is Yes. I want to be able to add a logo to my theme then you can: hard code it in to your header.php file by just adding img src = link to image with height no width, OR add this to your theme header.php file right after <div id="branding">:

            <div class="logo">
                <?php echo get_custom_logo(); ?>
            </div>

and then add this to your functions.php file right before add_action('wp_footer', - but anywhere is fine.

function config_custom_logo() {
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme' , 'config_custom_logo' );

For right now if you want your logo bigger or smaller then resize it in your image program to get the correct size. There, you just added the add logo feature to your theme.

OK. So lets learn with something powerful in a custom core scenario. Something to get you going, or mainly, something to get you thinking. How this works and what are the possibilities.
Now this next part I recommend you do this on a local install for development OR on a install that is NOT PRODUCTION! Use it if you go from here on a experimental install or make sure you save your Blankslate and Blankslate-child files to go back to or overwrite.
And while we are on it, if you have not taken the time to do so - Go to Plugins and Install UpdraftPlus - Backup/Restore. Install this plug in and make sure you have some kind of a backup at minimum. Also, [my recommendation] in a production website, aside from git GitHub or any combined practices of continuous integration (CI) or continuous delivery or continuous deployment (CD) bullshit you want to give me, Please just have basic core backup of all the files tucked in a zip or tar file and a VALID export [which is verified will easily IMPORT back into a VALID DATABASE.] And don't forget to at least name it accordingly and stick a date on it. // OK. rant done. Moving right along.

So. [My recommendation] is to install the following plugins. So get an idea of where this is going. By the way. If you have a new install and are moving forward from here. Don't install plugins. If you have a website already with plugins, moving forward, don't install plugins. It's fine but more on that later AND the point of all this is: If you had a WELL installed CORE WP install with a database and you JUST did what we have gone over so far and had it backed up - you are at a good point. Yes. You can always reinstall again and start over but the footnote is: Every time you install plugins themes etc you are altering your CORE and adding TABLES to your database. Did you know that? So for example. If you install a plugin, maybe a bunch, then decide to delete or not use those plugins anymore, does it clean up your database? or does it leave a bunch of debris behind? Remember your goal is to have a end product website with JUST the amount needed to meet ALL it's requirements but not ones it does not need. OK. Moving right along.

So. Let's install the following plugins:

WordPress Syntax Highlighter Plugin
WP Add Custom CSS
Updraft Plus Backup and Restore [if you haven't already] and make a backup.
Go to Plugins: Add New in your WordPress left panel and search for those.

WordPress Syntax Highlighter Plugin with allow you to edit your website in raw HTML almost like you were with a static HTML page through a IDE type editor like Visual Code or Codepen.
Now when you Make a Page in WordPress you will see at the top right of the page:
This, is really important and powerful. Why? because the bottom-line is your WordPress page spits out a basic HTML page anyway. Like when you are ON A PAGE of the website right? View Source. But the problem is with WordPress you loose the gateway to be able to edit your HTML page. Edit your WordPress pages like they were a regular HTML page to gain back some of the power lost using WordPress.
More on this later. Don't get overwhelmed.

OK. So. On the WP Add Custom CSS plugin after installing you will see a link for settings under Installed Plugins. Note on this plugin: Yes. This does the same as Additional CSS under your Theme Appearance settings. But, two things I like about it. One, you can turn On or Off your additional CSS just by simply deactivating the plugin. And two, it allows you to apply those CSS rules to a particular content category like Posts or Pages etc. The other thing is that if the CSS here is to become of of a Permanent Requirement, then you can move the CSS from here and include it in your style.css theme file OR add it in Additional CSS in your Theme appearance tab.

So. Let's go to Settings in WP Add Custom CSS plugin under Installed plugins and paste in the following CSS Code:

 .wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
}
.box {
background-color: #D3D3D3;
border: .1rem solid #999;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: auto / span 2;
}
.k {
grid-column: auto / span 3;
}
.g {
grid-column: auto / span 2;
grid-row: auto / span 2;
}
@media (max-width: 750px) {
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(10px, 1fr) ) ;
}
.box {
background-color: #D3D3D3;
border: .1rem solid #999;
color: #fff;
border-radius: 5px;
padding: 5px;
font-size: 150%;
}
}


/* BEGIN FLEXGRID */

.flexgrid {background-color: antiquewhite} .column {border: 1px solid blue; }



.container {
max-width: 1200px;
margin: 0 auto;
}

.flexgrid {
display: flex;
flex-wrap: wrap;
}

.column {
box-sizing: border-box;
flex: 1;
}
.column {padding: 1rem; }

.smaller { flex: .5; }
.bigger { flex: 2.5; }
.biggest { flex: 3.5; /* increase to make the column bigger */ }

.halves .column { flex: 0 0 50%; }
.thirds .column { flex: 0 0 33.3333%; }
.fourths .column { flex: 0 0 25%; }
.fifths .column { flex: 0 0 20%; } /* 100 divided by 5 */
.sixths .column { flex: 0 0 16.66%; } /* 100 divided by 6 */
.sevenths .column { flex: 0 0 14.28%; } /* 100 divided by 7 */
.eighths .column { flex: 0 0 12.5%; } /* 100 divided by 8 */
.tenths .column { flex: 0 0 10%; } /* 100 divided by 10 */
.elevenths .column { flex: 0 0 9.09%; } /* 100 divided by 11 */
.twelfths .column { flex: 0 0 8.333%; } /* 100 divided by 12 */

.flexrow { flex-direction: row; }/* optional /state direction box flow ->>*/
.flexcolumn { flex-direction: column; }/* optional /state direction box flow -^^*/
.flexstart { justify-content: flex-start; }
.flexend{ justify-content: flex-end; }
.flexcenter { justify-content: center; }
.flexspacebetween { justify-content: space-between; }
.flexspacearound { justify-content: space-around; }
.flexspaceevenly { justify-content: space-evenly; }

@media (max-width: 750px) {
.flexgrid {
display: block;
}
}

Done? Ok. Good. Now. Let's create a new Page.
Page left pane. Add New. NOW IMPORTANT. Type in a Page Title. But go the the farthest right side and choose - Code Editor!

OK. Now.

Don't forget to put the URL which is usually the name of the page to something simple like: layout.

Then paste in this code in the Code Editor:

<br>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
</div>
<div class="flexgrid">
<div class="column">Col 1</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
<div class="column">Col 5</div>
<div class="column">Col 6</div>
</div>
<div class="flexgrid">
<div class="bigger column">Col 1</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="column">Col 1</div>
<div class="bigger column">Col 2</div>
<div class="column">Col 3</div>
</div>
<div class="flexgrid halves"><!-- "halves" -->
<br>
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
</div>
<div class="flexgrid thirds"><!-- "thirds" -->
<br>
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
<div class="column">Col 5</div>
<div class="column">Col 6</div>
</div>
<div class="flexgrid fourths"><!-- "fourths" -->
<br>
<div class="column">Col 1</div>
<div class="column">Col 2</div>
<div class="column">Col 3</div>
<div class="column">Col 4</div>
<div class="column">Col 5</div>
<div class="column">Col 6</div>
<div class="column">Col 7</div>
<div class="column">Col 8</div>
</div>
<br> <br> <br>
<div class="flexgrid">
<div class="column">
<div class="grid">
<div class="column">A</div>
<div class="column">B</div>
<div class="column">C</div>
<br>
</div>
</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="column">
<div class="grid fourths"><!-- "Fourths" -->
<br>
<div class="column">A</div>
<div class="column">B</div>
<div class="column">C</div>
<div class="column">D</div>
<div class="column">E</div>
<div class="column">F</div>
<div class="column">G</div>
<div class="column">H</div>
<br>
</div>
</div>
<div class="column">Col 2</div>
</div>
<div class="flexgrid">
<div class="bigger column">Content</div>
<div class="column">happy little sidebar
<br>
<div class="flexgrid halves">
<div class="column">G</div>
<div class="column">R</div>
<div class="column">I</div>
<div class="column">D</div>
<br>
</div>
</div>
</div>



ADVANCED WORDPRESS DEVELOPMENT:

I want to point out a invaluable resource on the WordPress site that is the next level of WordPress development.
https://developer.wordpress.com/docs/api/

REST API is available to be utilized in WordPress to allow different ways of accessing WordPress, whether it is a app or through some other format, to utilize or bring additional features when necessary.

Utilizing this along with what we have discussed so far [FRONT END,] added with fundamental techniques on the [BACK END] of WordPress [database management, server set up and maintenance, advanced implementation streamline measures to ensure site efficiency, performance, simplicity, and reliability.] - will ensure not only an high grade unique operating platform of WordPress. This is not like a standard or typical install that most WordPress owners are accustomed to. One should note and keep in mind what WordPress was originally started for. Plus if you intend to use it for something that has high demand public-facing requirements, it should be treated as such.

Like with other or many web software platforms, always keep in mind. It is not always what you ADD to project that makes it. It is removing all the less required baggage that presents itself starting out the gate. Keeping it so. Streamlining it. Then adding just what you need just for that particular custom project scenario. Otherwise, you are just adding on top of more garbage. It may work, sure. But there is a reason MANY people have made an attempt in the past and currently to provide Alternative solutions to WordPress with minimum extra code or complication. They are out there and they have their merit just like WordPress. So what is the best solution for you?? Click one button and install WordPress, add some plugins, then be done with it?? Maybe. But it really takes a seasoned professional to get in and do a thorough overall evaluation beforehand. More importantly, it helps if you have groundwork map of what you are building before start connecting the dots. The more you have a better blueprint of what you need to have happen, bringing people in, how things will work, common sense application, end-user thinking, value assessment, and how to keep interest after a visit, then the easier it will be across the board.

WordPress Grids Page >

[ FOOTNOTE: ] Read - I realize at this point into the article that there is a lot more to this than just a short post. There are some vital aspects of this tutorial that I want to convey. There are a number of paths and options. So now I realize I need to break it down into sections - putting each example, tutorial, or option onto it's own separate page. Ideally a diagram would be nice.

I do also realize though that there is a need for a decent tutorial or post on this topic as I can't find any decent articles online except bits and pieces. Also if you made it this far you might see based on some of the post above this is getting kind of interesting. I will be refining it.

Please post legitimately in the comments below if you read this and would like to have me finish this article/tutorial. In the meantime, I am working on it and will break it down a section at a time. / * End Footnote */

Leave a Reply

Your email address will not be published. Required fields are marked *