Skip to content

MoradHamdy/Themeforest-Wordpress-theme-development-workflow

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 

Repository files navigation

#A GOOD WORKFLOW SAVES YOUR TIMES & MONEY.

##Development Process

Develop the entire website in localhost Commit changes to git and push to Bitbucket or github. ###1. Starter theme

Make Your Own Starter theme based On Underscores or Twenty Seventeen (New version of Wordpress default theme) and Underscores (made by Automattic)

After Complete your starter theme save this on GitHub or Bitbucket.

###2. Start Work For New Project

Cloning your starter theme (or a fork of it) into /wp-content/themes/ folder

###3. Use task runner Like Grunt or gulp For What ?

  • prefixes to use in CSS
  • Compressing my images
  • Linting and minifying JS files
  • Creating sprites
  • Constantly refreshing my browser

####GULP RESOURCES

####GRUNT RESOURCES

###4. Use Preprocessor Like Sass Or Less

###4. Use git Why Use Git:

  • Never have to remember which files you changed
  • Super easy to keep all copies in sync

Git Resource:

Desktop Tools

####WORDPRESS-SPECIFIC GIT RESOURCES

###5. Use Trello Theme development is managed with Trello. Trello is a task management app that gives you a visual overview of what is being worked on and who is working on it. The team sets about beta testing the theme. A list of bugs, tweaks and solutions is compiled, a hackathon is scheduled, and everything is completed by the developer.

http://lifehacker.com/how-to-use-trello-to-organize-your-entire-life-1683821040

###6. Clean Up Your Source Code

  • Messy source code is a developer’s nightmare. It makes finding things difficult, and it makes it extremely difficult for anyone else to work with it.
  • Indent nested lines.
  • Indent tabs always.
  • Be consistent with formatting.
  • Include concise, descriptive comments.
  • Mind your line breaks.
  • Strive for clean markup.

###7. Keep In Mind While Developing a theme:

Add this to wp-config.php define( 'WP_DEBUG', true );

#####Escape Everything

// Use anytime HTML element encloses a section of data:

echo esc_html( $no_html );

// Use on all URLs, including those in the 'sr####c' and 'href' attributes of an HTML element:

<img src="<?php echo esc_url( $escaped_url ); ?>" />

// Use for inline Javascript:

<a href="#" onclick="<?php echo esc_js( $escaped_js ); ?>"><?php esc_html__( 'Click Here', 'text-domain' ); ?></a> 

// Use for an HTML attribute:

<div class="<?php echo esc_attr( $escaped_class ); ?>">

#####Prefix Everything

// Functions

function prefix_setup()


Prefix_Class {}

// Global Variables

global $prefix_passengers;

// Action Hooks

do_action( ‘prefix_start_engine’ );

// Filter Hooks

$register = apply_filters( prefix_register );

// Non Third-Pary Script Handles

wp_enqueue_script( 'prefix-functions', get_theme_directory_uri() . 'js/custom/functions.js' );

// Non Third-Pary Style Handles

wp_enqueue_style( 'prefix-minified-style', get_theme_directory_uri() . 'style.min.css' );

// Images

add_image_size( 'prefix-large', 800, 600 );

#####Do Not Prefix Third Party Scripts

// Incorrect 
wp_enqueue_style( 'prefix-font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), '4.2.0', 'all' );

// Corrrect 

wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), '4.2.0', 'all' );

// Incorrect 

wp_enqueue_script( 'prefix-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '1.1.1', true );

// Corrrect 

wp_enqueue_script( 'jquery-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '1.1.1', true );

#####Properly Include Plugins Using TGMPA

// Include a plugin from the WordPress Repository:
array(
  'name'      => esc_html__( 'WooCommerce', 'text-domain' ),
  'slug'      => 'woocommerce',
  'required'  => false,
),
// Include a plugin bundled within a WordPress theme:
array(
  'name'      => esc_html__( 'Example Plugin', 'text-domain' ),
  'slug'      => 'example-plugin',
  'source'    => get_template_directory() . '/inc/plugins/example-plugin.zip',
  'required'  => false,
),

#####Provide Offline Documentation Offline documentation ensures that your customers are not hanging when there is not an Internet connection available or when your files are inaccessible – for any reason. Additionally, you do not have to ensure the assets will be infinitely accessible.

##Test theme

###8. Run Tests

Check Plugins

##Conclusion If your theme complies with the following Workflow, you’ll probably have a much quicker time getting your WordPress theme approved on ThemeForest.

###Credits: Rich Tabor, Dara Skolnick

####Copyright Ataurr ####Licence GPL 2+

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published