Tips
Change Permalinks in Settings to use non date format unless just blog. Can change per page.
Design:
Custom Pages
Page Templates and Template Partial (part of a page)
Plug-in Page
Error Page
WordPress Theme Structure
Style.css should be in the location of theme .html files
functions.php
Custom Files
These are default templates that are used when a more specific template can't be found
Page Templates
index.php is the only required template file... most generic...should be flexible
page.php is used to display pages
home.php is used for the front page and shows latest posts
front-page.php is used for static front pages
Posts Templates
single.php is for individual post
archive.php is for post archives
category.php is for posts of a specific category
tag.php is for posts of a specific tags
Template Partials
a section or part of a web page that is encapsulated in a template that can be pulled in to any page.
comments.php
sidebar.php
footer.php
header.php
search.php
attachment.php
date.php
image.php
404.php
author.php
rtl.php
taxonomy.php
Can combine them
i.e.
Archive-cat.php
Page-contact.php
Single-lady.php
Template Hierarchy
Determines how WordPress chooses a template file to display a page.
There is a flowchart of wordpress.org
Development
wp-config.php
Define('WP_DEBUG', true); // for development only
everything outside of wp-content folder is overwritten on update
themes are at wp-content/themes/mythemehere
create a directory here as shown above.
create the two required files for a theme.
style.css
index.php
In order for WordPress to recognize our theme we have to add the following to the style.css file.
The basic is:
/*
Theme Name: Some user friendly name for my theme here
Author: me
Description: Custom theme created for my company
textdomain: mytheme
*/
At this point it will show under Themes in WordPress.
Can also copy it from an existing theme such as Twenty Sixteen. It is just a comment at the top of the style.css file
that says the name of the theme, etc.
Notice there is no image showing a preview of our theme. Can add a Screenshot.png in the mythemehere directory. It can't be larger than 1200 x 900.
To move over my css, Copy my css into the style.css file. If using something like bootstrap that has its own css files use wp_register_style and wp_enqueue_style and add_action. Or more simply: <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style1.css" />
This should also work: <link href="<?php echo get_stylesheet_directory_uri().?>'/style2.css'; ?>" rel="stylesheet" /> and appears to be built for purpose.
A template should not include the stuff in the header or footer. That would be in the header and footer templates.
A simple example for index.php would be
<?php get_header(); ?>
<div>some html</div>
<?php get_footer(); ?>
In the header.php include all starting with <!DOCTYPE html><html>. Add <?php wp_head(); ?> just before the end of the </head> tag so php can inject their own stuff. Delete title tag so WordPress can do it.
In the footer.php include all starting with footer text and the </body><html>. Add <?php wp_footer(); ?> just before the end of the </body> tag so php can inject their own stuff.
When referencing an image from the front-page.php file (for example) use.
If we want want to create a template for a specific page (not the front page) then use name the file something like page-contact.php such that page-<slug>.php. The template will show under the Page Attributes when adding the page. In this scenario all the page specific html and content can be in this file since it will only ever be used by this page. Effectively, the header and footer need to be removed and replace with the php calls to pull in the footer.php and header.php files we defined. Also any paths to images, etc will need to be prefixed with <?php bloginfo('template_url')?>. The downside of putting the content in it will be that it is not editable from WordPress and the theme files itself would need to be updated. BTW, to find what the slug, edit the page and go to Screen Options and check Slug. The slug will now show on the page.
<img src="<?php bloginfo('template_url') ?>/images/myimage.jpg">
If in style.css it would just be images/myimage.jpg assuming images/myimage.jpg and the style.css are in the same directory in my theme directory.
We can also create one for all pages (global). In this case name the file page_full-width.php for example where full-width is not a slug for any page.
To add menus to the header we can use WordPress's menu that can be edited using WordPress's tooling. Just add <?php wp_nav_menu( $args = array ('menu_class' => 'my-nav-class', 'theme_location' => 'primary')); ?> where the menu is to be used
To have the navigation also show in the footer.php add
<?php wp_nav_menu( $args = array ('menu_class' => 'my-footer-nav-class', 'theme_location' => 'footer')); ?>
Notice the Menus or Widgets isn't showing under Appearance menu in WordPress. We need to add the functions.php to file to our theme.
NOTE: there are no namespaces so function names can conflict with other vendor's functions. Best practice is to include the name of theme in function name.
Add functions.php to theme.
A basic file would look like:
<?php
if (! function_exists('mytheme_setup')) :
function mytheme_setup() {
add_theme_support('title-tag');
}
endif;
add_action('after_setup_theme', 'mytheme_setup()');
/* Register Menus */
function register_mytheme_menus() {
register_nav_menus(
array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu')
)
);
}
add_action('init', 'register_mytheme_menus');
/* Add Stylesheets, fonts, etc */
function mytheme_scripts() {
wp_enqueue_style('mytheme_styles', get_stylesheet_uri());
wp_enqueue_style('mythemem_google_fonts', 'http://fonts.googleapis.com/css...');
}
add_action('wp_enqueue_scripts', 'mytheme_scripts');
Now we can remove those stylesheets and fonts from the header.php.
Now Menus is showing under Appearance in WordPress. Now we can use the Menu editor in WordPress to create our menus. Notice WordPress knows about Primary Menu adn Footer Menu as theme locations.
Widget Areas allow the content to be changed in WordPress by changing a widget. In functions.php we need to register it.
/* Add Widget Areas */
function mytheme_widget_init() {
register_sidebar( array ('name' => __('Main Sidebar', 'mytheme'),
'id' => 'main-sidebar',
'description' => __('Some descr', 'mytheme'),
'before_widget' => '<section id="%1$s" class="%2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'
));
}
add_action('widgets_init', 'mytheme_widget_init');
Add a file called sidebar.php
In the file add something like
<?php if (is_active_sidebar('main-sidebar')) : ?>
<aside class="sidebar widget-area">
<?php dynamic_sidebar('main-sidebar'); ?>
</aside>
<?php endif; ?>
Now Widgets will show up under Appearance in WordPress. Any of WordPress's widgets can be added to the area now. This includes the Text/HTML editor to allow for custom content each time we use the page template
Can use Custom Post type to allow users to use WordPress to edit content using form. Like a data driven template. These custom types show up in menu and edited like a database.
Security Concerns:
Brute force login
Don't use admin as username
Use secure password
Enable two-factor authentication
.htaccess to blog certain ip addresses
Comment Spam
Keep an eye on your comments
Tweak Discussion settings to limit links and blacklist keyowrds or ip addresses
Require users to register in order to make comment
Plug-ins
Security Plugins
All in One WordPress Security and Firewall Plugin
iThemes Security
Securi Security
Top Backup Plugins
BackUpWordPress
BackupBuddy
Top SEO Plugins
WordPress SEO by Yoast
Other
Broken Link Checker
Google Analytics
W3 Total Cache
Sync - for managing multiple WordPress sites
