alecaddd / awps Goto Github PK

Hello!

I used Local to set up a development environment for myself. It sets up the required PHP version, the database, a WordPress instance, a local domain, and a local-only SSL certificate for the local domain.

Since all that is taken care of, what would my "installation" process look like? Any ideas here?

Hello Alecaddd,

In this path: awps/inc/Custom/Custom.php how I can create and add Shortcodes to my theme?

Not sure if this is intentional or not, but the css that ships with the slick carousel package isn't loaded into the theme, even though there is a carousel.js file.

In my project, I updated the mix file to include adding the css to the assets directory:

mix.sass( 'node_modules/slick-carousel/slick/slick.scss', 'assets/dist/css' )

Then updated the Enqueue.php file:

wp_enqueue_style( 'slick', mix('css/slick.css'), array(), '1.0.0', 'all' );

I can make a PR if you want this included by default 😉

Hey man!

Quick question.

I've specified Sourcemaps in webpack.mix.js like so:

// Compile assets
mix
	.js( 'assets/src/scripts/app.js', 'assets/dist/js' )
	.js( 'assets/src/scripts/admin.js', 'assets/dist/js' )
	.react( 'assets/src/scripts/gutenberg.js', 'assets/dist/js' )
	.sass( 'assets/src/sass/style.scss', 'assets/dist/css' )
	.sass( 'assets/src/sass/admin.scss', 'assets/dist/css' )
	.sass( 'assets/src/sass/gutenberg.scss', 'assets/dist/css' )
	.sourceMaps();

However, it's not compiling sourcemaps. Perhaps the mix.js and mix.sass functions should be separated?

EDIT: Never mind, I'm pretty new to Laravel Mix. For others, I specified it like so:

if ( ! mix.inProduction() ) {
	mix.sourceMaps( true, 'source-map' );
	mix.webpackConfig({ devtool: 'source-map' });
}

First of all - I'm beginner in wordpress themes developing, so also a beginner in AWPS.

Misspell

awps/config/Custom/Admin.php => private function enqueue()

$scripts = array(
	'script' => array( 
		'jquery', 
		'media_uplaoder',
		get_template_directory_uri() . '/assets/js/admin.min.js'
	),

Shouldn't it be media_uploader?
I also had to change a jquery into get_template_directory_uri() . '/node_modules/jquery/dist/jquery.js, because jquery in admin.js didn't worked for me.

Gulp watch issue

When I run gulp watch, it watches files, and fires compilation on every change, even If I didn't save changes.

• Visual Studio Code version 1.19.2
• I'm running watch via built-in terminal on Windows 10 Pro with Ubuntu Bash

It happens also, if I run standalone terminal and use (for example) Atom.
It's not very disturbing, but If I'm during writing some code, gulp throw error compilation and stops watching.

[Browsersync] 4 files changed (style.min.css.map, style.min.css, admin.min.css.map, admin.min.css)
[Browsersync] 2 files changed (admin.min.js.map, admin.min.js)
[Browsersync] Reloading Browsers... (buffered 6 events)
[Browsersync] 2 files changed (main.min.js.map, main.min.js)
[Browsersync] Reloading Browsers... (buffered 2 events)
[13:51:07] Starting 'js'...
[13:51:07] Finished 'js' after 2.49 ms
events.js:163
      throw er; // Unhandled 'error' event
      ^

SyntaxError: /mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/src/scripts/admin.js: Unexpected token (3:28)
  1 | $(document).ready(()=>{
  2 |     let str = $('#togglesInput').val();
> 3 |     let arr = str.substring(.split(',');
    |                             ^
  4 |     console.log(arr);
  5 | });
    at Parser.pp$5.raise (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$3.parseExprAtom (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3750:12)
    at Parser.pp$3.parseExprSubscripts (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3474:19)
    at Parser.pp$3.parseExprOps (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3344:19)
    at Parser.pp$3.parseExprListItem (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:4312:16)
    at Parser.pp$3.parseCallExpressionArguments (/mnt/d/xampp/htdocs/wordpress/wp-content/themes/bazgier/node_modules/babylon/lib/index.js:3573:20)

As you can see, I've changed some code, then I stopped (yay, I need to think what I should do next), and gulp stops working, I had to start it again by gulp watch.

Gulp https issue

I had also problem with browser-sync and https. I had to create my own certs, but chrome still throws website is unsecured.

gulp.task( 'browser-sync', function() {
	browserSync.init({
		proxy: projectURL,
		https: {
			key: '/Users/alecaddd/.valet/Certificates/wp.dev.key',
			cert: '/Users/alecaddd/.valet/Certificates/wp.dev.crt'
		},
		injectChanges: true,
		open: false
	});
});

After adding some pages to the primary menu, I inspected the output in my browser.

The following HTML is sent to the browser.

<div class="menu-main-menu-container">
    <ul id="primary-menu" class="menu">
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="https://www.sathil-starter-theme.dev/home/">Home</a></li>
         <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="https://www.sathil-starter-theme.dev/about/">About</a></li>
         <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://www.sathil-starter-theme.dev/contact/">Contact</a></li>
     </ul>
</div>

Now I'm wondering why the bootstrap classes that you already implemented to the WalkerNav Class are not in the output. The WalkerNav for example should return the following for the opening ul: <ul class=\"dropdown-menu$submenu depth_$depth\" >. As you can see there is, however, no class named dropdown-menu*.

What am I missing?

PS: I'm using the current awps version and have not edited any of the files that are invoked in the output of the menu.

I hit a problem, can you help?

C:\workspace\websites\wpawps\wp-content\themes>awps new sunny

Summoning application..
Downloading Package..

[GuzzleHttp\Exception\RequestException]
cURL error 60: SSL certificate problem: unable to get local issuer certific
ate (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)

new

after "assets/dist"

dev:
wp-content/themes/awps/assets/dist//js/app.js?ver=1.0.0'></script>

prod:
wp-content/themes/awps/assets/dist//js/app.js?id=08a4e7a767d06618d6ef&ver=1.0.0'></script>

I have added boostrap js, scss files.

But it shows undefined for inline scripts.
I think it places on footer. So I added global define autoload.

mix.autoload({
jquery: ['$', 'window.jQuery', "jQuery", "window.$", "jquery", "window.jquery"],
'popper.js/dist/umd/popper.js': ['Popper']
});

But it doesn't work.

I have searched on google and tried many ways. But inline scripts are all undefined.

Can you please add an example how to add boostrap4?

Thank you,

I noticed this bug for the first time in the awps theme, but it was also very simple to reproduce it in a non WordPress-based project. If the import-function in ES6 is used like this,

import $ from 'jquery';
    window.$ = $;
    window.jQuery = $;
import 'izimodal';

one would expect, that all the imports other than jQuery, which may be dependent on the latter, are loaded correctly, since jQuery has already been defined before. Unfortunately, JS is not executed consecutively and so very often an error message appears in the console, which tell one, that the script XY needs jQuery:

iziModal requires jQuery

Probably it only works, if script A, that is dependent of script B, is bigger than script B, because then script A will be finished earlier with processing and thus be in front of script B in the resulting main.min.js. In my case, the code bit throwing the error was in line 8 of my main.min.js, so definitely before the jQuery code.

Here is the code bit of iziModal:

if (typeof jQuery === "undefined") {
     throw new Error("iziModal requires jQuery");
}

Does anyone have an idea how to handle this bug?

PS: In Alex' video, this bug is not noticeable, because WordPress integrates jQuery before loading other scripts and Alex did not unregister WP jQuery.

I am getting an error

"Fatal error: Uncaught Error: Class 'awps\core\tags' not found in /var/www/test/wp-content/themes/awps/views/content.php:23 Stack trace: #0 /var/www/test/wp-includes/template.php(690): require() #1 /var/www/test/wp-includes/template.php(647): load_template('/var/www/test/w...', false) #2 /var/www/test/wp-includes/general-template.php(167): locate_template(Array, true, false) #3 /var/www/test/wp-content/themes/awps/index.php(40): get_template_part('views/content', '') #4 /var/www/test/wp-includes/template-loader.php(74): include('/var/www/test/w...') #5 /var/www/test/wp-blog-header.php(19): require_once('/var/www/test/w...') #6 /var/www/test/index.php(17): require('/var/www/test/w...') #7 {main} thrown in /var/www/test/wp-content/themes/awps/views/content.php on line 23"

Fatal error: Using $this when not in object context in C:\wamp64\www\ortimis-wp\wp-content\themes\ortimis\config\setup\Header.php on line 42

Testing new gutenberg editor having it crash when saving a simple post. the first line of the error message is TypeError: Cannot read property 'addQueryArgs' of undefined
this error occurs in (also note the categories and tags dropdowns are not shown)

• an earlier v3 version of AWPS when using tailwindcss 13/04/2018
• the latest version of AWPS as downloaded 30/10/2018

However it does not do it in version 2 of AWPS 31/01/2018

I started a query with wordpress at [https://wordpress.org/support/topic/gutenberg-giving-error-when-creating-new-post/]

$fa-font-path: "../webfonts" !default;

As I try to change path to "../fonts" getting following error. Any suggestions that how can i fix this path issue

Module build failed (from ./node_modules/css-loader/index.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/fa-brands-400.eot' in 'D:\laragon\www\MBA\wp-content\themes\awps\assets\src\sass'

I tired to use Settings class (inc/Api/Settings) in a plugin.
when i call function add_admin_menu this error is returned:
"Call to undefined function Inc\add_menu_page()"

On woocommerce product page gallery images does not display. I added following css and it worked

.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
opacity: 1 !important;
}

now as per woocommerce documentation i added following theme support in theme setup but gallery zoom, gallery lightbox and gallery slider are not working.

add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

I tested this with twenty seventeen theme and everything works there. Attached are the screenshots.

Following is twenty seventeen

Following is AWPS

When I run "npm run dev" I get the error message:

Laravel Mix
Error: /opt/lampp/htdocs/wp_alecaddd_awps/wp-content/themes/awpstest/assets/src/sass/style.css
ModuleBuildError: Module build failed (from ./node/modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/opt/lampp/htdocs/wp_alecaddd_awps/wp-content/themes

As a result, I am getting the following error:

Notice: Undefined index: /css/style.css in /opt/lampp/htdocs/wp_alecaddd_awps/wp-content/themes/awpstest/inc/Helpers.php on line 80
Notice: Undefined index: /css/style.css in /opt/lampp/htdocs/wp_alecaddd_awps/wp-content/themes/awpstest/inc/Helpers.php on line 97

I would appreciate if you could guide me to get a work around?

how can I load css and javascript of this plugin?

https://wordpress.org/plugins/cookie-notice/

https://github.com/dfactoryplugins/cookie-notice/blob/master/cookie-notice.php#L825

@bartoszarendt @lucspe @cristianp6 @chesio

I see the css, but not the js...

I've started getting a number of depreciation warnings for use of "/" for division in SASS when NPM is compiling the files. Digging into the problem it seems that the new SASS standards prefer @use and @forward paired with math.div().

Thanks for this amazing starter theme. I love it and your youtube tutorials! They are such a great help!

I used Dotenv\Dotenv::createImmutable( DIR ) to fetch .env file, but it isn't getting the environment variables to connect to the database using getenv() function. Replacing all getenv() with $_ENV[''] works.

I printed $dotenv variable using print_r(). Output is given below:

Dotenv\Dotenv Object
(
    [store:Dotenv\Dotenv:private] => Dotenv\Store\FileStore Object
        (
            [filePaths:Dotenv\Store\FileStore:private] => Array
                (
                    [0] => /opt/lampp/htdocs/wp_alecaddd_awps/.env
                )

            [shortCircuit:Dotenv\Store\FileStore:private] => 1
            [fileEncoding:Dotenv\Store\FileStore:private] => 
        )

    [parser:Dotenv\Dotenv:private] => Dotenv\Parser\Parser Object
        (
        )

    [loader:Dotenv\Dotenv:private] => Dotenv\Loader\Loader Object
        (
        )

    [repository:Dotenv\Dotenv:private] => Dotenv\Repository\AdapterRepository Object
        (
            [reader:Dotenv\Repository\AdapterRepository:private] => Dotenv\Repository\Adapter\MultiReader Object
                (
                    [readers:Dotenv\Repository\Adapter\MultiReader:private] => Array
                        (
                            [0] => Dotenv\Repository\Adapter\ServerConstAdapter Object
                                (
                                )

                            [1] => Dotenv\Repository\Adapter\EnvConstAdapter Object
                                (
                                )

                        )

                )

            [writer:Dotenv\Repository\AdapterRepository:private] => Dotenv\Repository\Adapter\ImmutableWriter Object
                (
                    [writer:Dotenv\Repository\Adapter\ImmutableWriter:private] => Dotenv\Repository\Adapter\MultiWriter Object
                        (
                            [writers:Dotenv\Repository\Adapter\MultiWriter:private] => Array
                                (
                                    [0] => Dotenv\Repository\Adapter\ServerConstAdapter Object
                                        (
                                        )

                                    [1] => Dotenv\Repository\Adapter\EnvConstAdapter Object
                                        (
                                        )

                                )

                        )

                    [reader:Dotenv\Repository\Adapter\ImmutableWriter:private] => Dotenv\Repository\Adapter\MultiReader Object
                        (
                            [readers:Dotenv\Repository\Adapter\MultiReader:private] => Array
                                (
                                    [0] => Dotenv\Repository\Adapter\ServerConstAdapter Object
                                        (
                                        )

                                    [1] => Dotenv\Repository\Adapter\EnvConstAdapter Object
                                        (
                                        )

                                )

                        )

                    [loaded:Dotenv\Repository\Adapter\ImmutableWriter:private] => Array
                        (
                            [APP_ENV] => 
                            [DB_HOST] => 
                            [DB_NAME] => 
                            [DB_USER] => 
                            [DB_PASSWORD] => 
                            [DB_PREFIX] => 
                            [WP_HOME] => 
                            [WP_SITEURL] => 
                            [AUTOSAVE_INTERVAL] => 
                            [WP_POST_REVISIONS] => 
                            [EMPTY_TRASH_DAYS] => 
                            [WPCF7_AUTOP] => 
                        )

                )

        )

)

same for css

Originally posted by @andreapaiola in https://github.com/Alecaddd/awps/issue_comments#issuecomment-439400540

Please consider

• Getting testing tools (JS/PHP) from package managers (require-dev)
• Compile JSX before running jshint - breaks tests
• SNIFF=1 could be done the Travis-way, if you are about running tests only in one of the jobs, move before-script to the matrix

Hi,
In gulp.js file

// Tasks gulp.task( 'browser-sync', function() { browserSync.init({ proxy: projectURL, https: { key: '/Users/myusername/.valet/Certificates/wp.dev.key', cert: '/Users/myusername/.valet/Certificates/wp.dev.crt' }, injectChanges: true, open: false }); });

where can I find or create wp.dev.key and wp.dev.crt file?

Great work and Thanks for the starter theme.

I am requesting a feature addition in the docs. Could you add a changelog or new features section in docs? This will help users to follow up on the new goodies embedded in the starter theme?

Like this version 3.0.4 has new functionality of assets() and svg() in helpers.php.

Hey Alecaddd,

Love the theme! Great work!

I'm having an issue with getting Gutenberg to work correctly when editing a page on the new Wordpress 5.0. The add new block button is disabled for me. Opening the console gives me an error.

Error:
TypeError: Cannot read property 'RichText' of undefined

The line const { RichText, BlockControls, AlignmentToolbar } = wp.editor

Changing wp.editor to wp.blocks removes the error but I still seem to have an issue with getting the add new block button to work properly. I'll keep digging and can hopefully find a solution.

Can you reference the documentation for the API that you used. Since the one I found seems a bit different.

Thanks!

I love the workflow and have used it on several production sites now.

Being there, I ran into the problem of cache busting and would therefore suggest to implement the versioning of laravel mix.

This would also mean that we have to add the mix(); function of laraval mix and adjust the file paths accordingly. See this gist

old way- $dotenv = new Dotenv\Dotenv( DIR ); // not working
new way - $dotenv = Dotenv\Dotenv::create(DIR);

https://github.com/vlucas/phpdotenv

It would be great to ditch Travis and implement a build test with the GitHub CI.
Anyone around that knows what to do?

Hi Alex,i need your helo, i started new project with last release of AWPS (oldest release worked for me), i run "local byflywheel" app for manage websites (it is like mamp), after the theme installation (moved at root, renamed and set .env file, moved at root and renamed the wp-config file, runned composer install) when i try to run my website i get this error:

Fatal error: Uncaught TypeError: Argument 1 passed to Dotenv\Dotenv::create() must be an instance of Dotenv\Repository\RepositoryInterface, string given, called in /Users/myusername/Local Sites/awps/app/public/wp-config.php on line 26 and defined in /Users/myusername/Local Sites/awps/app/public/wp-content/themes/awps/vendor/vlucas/phpdotenv/src/Dotenv.php on line 83

I don't know how to resolve it, is there something new i missed?

Last update is on May, 2021. More than one year ago. Is it alive? Can we use it?

Hello, I really want to try this theme but right after installation in Wordpress 5.0.2 I get this error:

PHP Fatal error:  Uncaught Error: Call to undefined function svg() in /home/admin/web/wp.vincurekf.cz/public_html/wp-content/themes/awps-3.0.4/header.php:42

Is the svg() feature fully integrated? I downloaded the latest release.

Thank you.

Hi,

how can I load
wp-content/plugins/lightbox-photoswipe/js/frontend.min.js
?

The module is https://wordpress.org/plugins/lightbox-photoswipe/

wp_enqueue_script( 'photoswipe-lib', plugin_dir_url(__FILE__) . 'lib/photoswipe.min.js', array(), self::LIGHTBOX_PHOTOSWIPE_VERSION );

wp_enqueue_script( 'photoswipe-ui-default', plugin_dir_url(__FILE__) . 'lib/photoswipe-ui-default.min.js', array('photoswipe-lib'), self::LIGHTBOX_PHOTOSWIPE_VERSION );

wp_enqueue_script( 'photoswipe-frontend', plugin_dir_url(__FILE__) . 'js/frontend.min.js', array('photoswipe-lib', 'photoswipe-ui-default', 'jquery'), self::LIGHTBOX_PHOTOSWIPE_VERSION );

photoswipe.min.js is loaded
photoswipe-ui-default.min.js is loaded
frontend.min.js is not loaded

die(plugin_dir_url(__FILE__) . 'js/frontend.min.js');

return https://site.local/wp-content/plugins/lightbox-photoswipe/js/frontend.min.js

which is right...

using another theme the js is loaded

Thank you!

Hello Alecaddd,

I love the work flow and was inquiring if you have a plan of using a css structure like ITCSS. The one in AWPS is simple and usable but could be simpler and easier to learn. Your thoughts? Oh this could be part of your documentation for question other future users might ask ;-)

Reference: Automattic/_s#1215

Hi Alex,

I am following your tutorial https://www.youtube.com/watch?v=NKRheNMczlM&list=PLriKzYyLb28kvx7IVw2sAXtZ2yN4A1otJ&index=1

Upon installation I am seeing the following errors .
No Idea, what I have done wrong !

Fatal error: Uncaught Exception: The Mix manifest does not exist. in /Applications/MAMP/community/mother/wp-content/themes/mother/inc/Helpers.php:74 Stack trace: #0 /Applications/MAMP/community/mother/wp-content/themes/mother/inc/Setup/Enqueue.php(33): mix('/css/style.css') #1 /Applications/MAMP/community/mother/wp-includes/class-wp-hook.php(286): mother\Setup\Enqueue->enqueue_scripts('') #2 /Applications/MAMP/community/mother/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #3 /Applications/MAMP/community/mother/wp-includes/plugin.php(465): WP_Hook->do_action(Array) #4 /Applications/MAMP/community/mother/wp-includes/script-loader.php(2539): do_action('wp_enqueue_scri...') #5 /Applications/MAMP/community/mother/wp-includes/class-wp-hook.php(286): wp_enqueue_scripts('') #6 /Applications/MAMP/community/mother/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #7 /Applications/MAMP/community/mother/wp-includes/plugin.php(465): WP_Hook->do_action(Array) #8 /Applications/MAMP/communi in /Applications/MAMP/community/mother/wp-content/themes/mother/inc/Helpers.php on line 74
The site is experiencing technical difficulties.

Here is the screenshot : https://ibb.co/T8pT22h

1. Warning: dirname() expects exactly 1 parameter, 2 given in C:\wamp\www\awps\wp-content\themes\awps\inc\Helpers.php on line 66
2. Fatal error: Uncaught exception 'Exception' with message 'The Mix manifest does not exist.' in C:\wamp\www\awps\wp-content\themes\awps\inc\Helpers.php on line 73
3. Exception: The Mix manifest does not exist. in C:\wamp\www\awps\wp-content\themes\awps\inc\Helpers.php on line 73

wp-config.php and the .env file is in the same directory.
.env file is hidden and it can be uncovered. So how it is securing my credentials?

I think my question is not so much clear to you. I just want to figure out if someone has access to my wp-config file he/she can also watch my .env file. So where my security and benefit is?

In development of blocks, wp.components.withAPIData has been removed. Please use the Core Data module or wp.apiFetch directly instead. https://wordpress.org/gutenberg/handbook/reference/deprecated/#3-7-0

I have no experience with OOP. I learned PHP while working on WordPress projects and written all my WordPress themes in a procedural manner. I like the modular approach that you have used in this theme. But does it support child themes https://codex.wordpress.org/Child_Themes#Using_functions.php?

Is there any reason that woocommerce review is not showing. just showing a normal comment.
Enabled all options to be able to WooCommerce review.

Thank you,