- Updating Plugins
- Sort out main functions in function.php file
- 404 page (created fields in 'option')
- template confirmation file upgrade
- general Headers upgrade
- remove tml-login template
- swipebox js was removed
- Update Plugin V.1.6.21
- Removing script footer modal menu (Deprecated)
- Adding a function inside fpsbase.js file for opening menu
- Adding Style base
- Adding icon hamburger span
Adding editorconfig Root project theme
Updating Plugins
- Updating Plugins
- About "Download": For the links with download, add data information to it ( data-linktype="download" data-documentName="< DOCUMENT TITLE >" ), Where < DOCUMENT TITLE > is the document title that is being downloaded.
- Add datalayers file in inc/datalayer-info.php
Material icons Added to the framework
-
to use them from html:
<i class = 'material-icons'>name icon</i> -
to use them from sass, through the mixin:
@include mIcons ('name_icon', font-size);for example:
@include mIcons ('backup', 2.5rem);
Defaults values: Icon: 'backup', $font-size:18px
List with all the icons: https://material.io/tools/icons
Method used for Sass: https://github.com/google/material-design-icons/issues/150#issuecomment-163021143
- Removing Font Awesome v5.7.2
- Adding Material Design icons
- Updating to New icons
- Social Icons are using SVG file
- Banner, added to Page as example of header banner
- Updating Plugins
- Code Optimization
- New mmenu / mobile Menu
- Updating to Boostrap v4.3.1
- Updating to Font Awesome v5.7.2
- adding wp_get_attachment_image() function to images
- Updating Plugins
- TML login
- gulp + sass + Browser sync / improving our workflow (instructions bellow !)
- Adding Function of Yoast meta description
- Adding htmlemail-2.0.5 plugin
- Replacing "data-social-network" to "data-socialnetwork" (social footer)
- Updating Plugins
- Updating Plugins
- Logo Size
- Changing the font-family of fontawesome
- "Adding author fields (social, thumbnail avatar) - autor.php page"
- Updating Plugins (SEO+TML)
- Adding Fields of Social Links
- Updating Plugins (SEO+TML)
- Updating to Fontawesome 5.0.13
- Adding social attributes in footer Section, helping with GTM
- Updating Plugins
- Removing Fontawesome Plugin
This Framework is being development to get more useful and faster the develop of a new theme from Front Porch Solutions Company. The idea is the developer use it like base in each development of a site, it has functions, code, fields most used in a basic development but it will be the tool to start with your site. You'll find here:
- A just right amount of lean, well-commented, templates.
- The main templates or pages with the basic fields we use in FPS
This Base theme Code is developed using next tools:
- Underscores as source code http://underscores.me
- Bootstrap v4.3.1 https://getbootstrap.com/
- Sass preprocessor https://sass-lang.com/
- Material Design --- Icons Here https://material.io/tools/icons/?style=baseline + Developer Guide here https://google.github.io/material-design-icons/
This Base theme Plugins used are next:
- ACF Plugin https://www.advancedcustomfields.com/
- ACF Option Pages https://es.wordpress.org/plugins/acf-option-pages/
- ACF Repeater Field
It helps us to automate so that every time we make a change in our scss we update the style.css and we refresh the browser.
1- Go to /themes/Fpsbase
2- Open console in the fpsbase directory, and type:
npm install
4- Open gulpfile.js and change the domain Here
browserSync.init(files, {
proxy: "themebase.dev/",
});
5- Type gulp in console
6- Enjoy
- GTM (Google Tag Manager)
- Logo
- Favicon
- Social Icons
- Footer Content (Copyrights + Footer Default)
- Newsletter Form
Are ready to use, only you should add content.
To get these fields it's necessary to import .JSON located in https://bitbucket.org/fps-dev/fpsframework/downloads/ . When you imported this file you will find the 'options' tab ready. The fields ready to use are:
<head>
<?php the_field('google_tag_header','option'); ?>
</head>
<body>
<?php the_field('google_tag','option'); ?>
</body>
<?php
$GETlogo = get_field('logo_site','option'); //FIELD USED
$logo = $GETlogo['ID']; //GET 'ID'
$size = 'medium'; // (thumbnail, medium, large, full or custom size)
?>
<a href="<?php echo esc_url(get_bloginfo('url'));?>">
<?php echo wp_get_attachment_image( $logo, $size ); ?> //FRIENDLY RESPONSIVE
</a>
<link rel="icon" href="<?php the_field('favicon', 'option');?>">
Located in footer.php
---------------------
<?php
if( have_rows('social_icons' , 'option') ):
while ( have_rows('social_icons' , 'option') ) : the_row();
$social = get_sub_field('social_icon');
?>
<a href="<?php the_sub_field('social_profile'); ?>" target="_blank" data-link-type="social" data-social-network="<?php echo $social['value']; ?>">
<i class="fab fa-<?php echo $social['value']; ?>"></i>
</a>
<?php endwhile; endif; ?>
Footer Default
--------------
<?php the_field('footer_info' , 'option'); ?>
Copyrights Field
----------------
<?php the_field('copyright' , 'option'); ?>
<?php the_field('newsletter_form','option'); ?>
[date]
The way to use in wp editor is:
-------------------------------
[button link="`add url`" color="primary" size="small" target="_self"]read more[/button]
The conversion is:
<a class="btn '.$atts["color"].' '.$atts["style"].' '.$atts["size"].'" href="'.$atts["link"].'" target="'.$atts["target"].'">'.$content.'</a>
- Swipebox http://brutaldesign.github.io/swipebox/
- Menu Mobile (mmenu) http://mmenu.frebsite.nl/
- Carousel Slick http://kenwheeler.github.io/slick/
These elements are located in js folder .js with all executed.
We defined two menus:
'menu-1' => esc_html__( 'Header', 'FPSBase' ),
'menu-2' => esc_html__( 'Footer', 'FPSBase' ),)
require('inc/shared-social.php');
Here are located Buttons and Date shortcodes
require('inc/shortcodes.php');
require('inc/pagination.php');
It means: Author Image
require('inc/author-fields.php');
The field:
__________
<?php the_field('author_image'); ?> //Image Author
* TML
* Confirmation Page
* Full Width Template
These pages are ready to be use, it means that each page have clean code and ordenaded.
* 404.php
* Author.php
* Search.php
* Archive.php
* Page-home.php
* Page.php
* Single.php
The base classes are located in _theme.scss here defined:
- Colors
- Fonts
- Font Weights
- Global sizes
Only you need to reuse all classes in this listed you need.
$primary: #5278FF;
$primary-hover: #3255c9;
$secondary: #36BDAD;
$secondary-hover: #279687;
$txt: rgba(60, 63, 77,0.80);
Just you need to change by site colors.
$font-family-base: 'Roboto', sans-serif;
$font-family-alt: 'Roboto Condensed', sans-serif;
There are two kind of Fonts Variable defined. You can create the extras you want.
Go to functions.php and about 65 line, exactly in FPSBase_scripts functions replace:
wp_enqueue_style('google-font', 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,500,700');
by your line generated in you font tool.
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-base: $font-weight-normal;
$font-weight-bold: 700;
$font-weight-semi: 600;
This file is located in _partials/_gform-wrapper.scss and here is defined some basic styles to help the forms of gravity form plugin look better. You dont need worry about
validation error styles because here are defined, too.
When you import an Image Background, just can use this class:
.backgroundSettings;
`@extend .backgroundSettings;`
The styles you will import are next:
___________
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
The function wp_get_attachment_image() generates the srcset attribute allowing for responsive images!
The selected image when using the image ID return type. This example uses the wp_get_attachment_image() function to generate the image HTML.
<?php
$image = get_field('image'); GET IMAGE ID
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
The result is:
<img width="2274" height="2480"
src="URL" class="attachment-full size-full" alt=""
srcset="URL 2274w, URL-275x300.png 275w, URL-768x838.png 768w, URL-939x1024.png 939w" sizes="(max-width: 2274px) 100vw, 2274px">
Somethings, we need to have a full widht version of any content. Now, it's ready to be used:
<div class="full-content"> //use this class
....
</div>
There is a sidebar predefined and you can find it in page.php
<div class="content-area">
<div class="container">
<section class="flex-inverter">
<?php while ( have_posts() ) : the_post(); ?>
<aside class="sidebar">
<?php if(function_exists('subpages_menu')) { subpages_menu(); } ?>
</aside>
<div class="info">
<?php the_title('<h1 class="entry-title">' , '</h1>'); ?>
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</section>
</div><!-- #main -->
</div>
Inside content-area class are defined the styles to sidebar works well. When the sidebar is activated or added the function of subpages_menu is going to show all pages of sub menu if exist.
flex-inverter class makes that in responsive view the content can be inverted. It means, the sidebar can be charged under general content. This class (flex-inverter) could be used in whatever part of site development.
Here we talk about these:
-webkit-transition: all ease .4s;
-moz-transition: all ease .4s;
-o-transition: all ease .4s;
-ms-transition: all ease .4s;
transition: all ease .4s;
It helps with a good transition between elements. So, you need to import the class .fade like here:
@extend .fade;
Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.
| Screen Size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
Example:
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
To Learn more: https://getbootstrap.com/docs/4.3/utilities/display/
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
- m - for classes margin
- p - for classes padding
Where sides is one of:
- t - for classes that set margin-top or padding-top
- b - for classes that set margin-bottom or padding-bottom
- l - for classes that set margin-left or padding-left
- r - for classes that set margin-right or padding-right
- x - for classes that set both _-left and _-right
- y - for classes that set both _-top and _-bottom
- blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
- 0 - for classes that eliminate the margin or padding by setting it to 0
- 1 - (by default) for classes that set the margin or padding to $spacer * .25
- 2 - (by default) for classes that set the margin or padding to $spacer * .5
- 3 - (by default) for classes that set the margin or padding to $spacer
- 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
- 5 - (by default) for classes that set the margin or padding to $spacer * 3
- auto - for classes that set the margin to auto
Example:
<div class="mt-2">MARGIN TOP OF $spacer * .5</div>
<div class="mx-auto">CENTERED ELEMENT</div>
<div class="mx-4">MARGIN LEF AND RIGHT OF $spacer * 1.5</div>
To Learn more: http://getbootstrap.com/docs/4.3/utilities/spacing/
There are many elements from Bootstrap that we can use and it won�t be necessary to create new code lines. Here, there�s a list of most used:
http://getbootstrap.com/docs/4.3/components/alerts/
http://getbootstrap.com/docs/4.3/components/pagination/
http://getbootstrap.com/docs/4.3/components/collapse/
http://getbootstrap.com/docs/4.3/components/modal/
http://getbootstrap.com/docs/4.3/components/navs/
http://getbootstrap.com/docs/4.3/utilities/display/ - Hiding Elements + Mobile-Friendly - Good utility!
http://getbootstrap.com/docs/4.3/utilities/embed/
http://getbootstrap.com/docs/4.3/utilities/flex/
http://getbootstrap.com/docs/4.3/utilities/float/
http://getbootstrap.com/docs/4.3/utilities/position/
http://getbootstrap.com/docs/4.3/utilities/shadows/
http://getbootstrap.com/docs/4.3/utilities/spacing/ - Good utility!
Please, stay update with this documentation and read the rest of content about BootstrapX.