If you want to build your own template it is good to install these extensions:
If you run into any issues, delete the extension and install the development version, which you can pull from github.
Then install the builder extension, to create a template skeleton.
One simple way to install typo3, besides others:
Now create a database and switch to your browser and open your typo3 website. Then just follow the install instructions.
One might run into several requirements issues which I will describe in another tutorial.
I tried several ways to remove google fonts from Divi like described here:
or here:
https://gist.github.com/mkrdip/f165408f23e2c645161b
But I did not get them to work.
Divi adds the google font with the function
|
1 2 3 4 |
function et_divi_load_fonts() { // code goes here } add_action( 'wp_enqueue_scripts', 'et_divi_load_fonts' ); |
And one can remove a function from a parent theme in a child theme with the remove_action() function from wordpress. So I added the following code to the child themes function.php:
|
1 2 3 4 |
function child_remove_parent_function() { remove_action( 'wp_enqueue_scripts', 'et_divi_load_fonts' ); } add_action( 'wp_loaded', 'child_remove_parent_function' ); |
And that worked!
I found this solution at:
To make use of web fonts it is best to host them on your own server. You can find many fonts and a description on how to use them here:
One can find a good description of how to implement google maps into a html page on google. But how can we implement a map in wordpress?
First we need a latitude and a longitude for our desired place which we can get from here or elsewhere: https://www.latlong.net/.
Then we need a google api key. If you do not have one already, here is how you can get it: https://developers.google.com/maps/documentation/javascript/get-api-key.
Now we can add a page, let’s say a contact page in our wordpress backend where we add a div with the id ‚map‘. In our style.css we can set a width, a height and a background-color for the map div.
With that done we need to add a map.js file e.g. in an assets folder in our theme or plugin. Here we can insert the initMap function described on google where we replace the lat and long with our data.
|
1 2 3 4 5 6 7 8 9 10 11 |
function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); } |
And finally we need to enqueue the map.js file and the external google api which can be achieved by using ‚wp_enqueue_script‚ like so:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function add_google_maps() { if ( ! is_page('contact')) { return; } wp_enqueue_script( 'my-map', get_template_directory_uri() . '/assets/js/map.js' ); wp_enqueue_script( 'my-google-maps', 'https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap' ); add_filter( 'script_loader_tag', function ( $tag, $handle ) { if ( 'my-google-maps' !== $handle ) return $tag; return str_replace( ' src', ' async defer src', $tag ); }, 10, 2 ); } add_action('wp_enqueue_scripts', 'add_google_maps'); |
The first statement ensures that the google maps functionality is only loaded on the contact page. For more info check WordPress Conditional Tags. Then two times ‚wp_enqueue_script‚ and finally the ‚add_filter‚ function with the ‚script_loader_tag‚ parameter adds the async and defer tags to the script tag.
This goes into the functions.php of our theme or to any appropriate place in our plugin. And that’s it.
With ‚wp_enqueue_script‚ we can add external javascript to a page and with ‚script_loader_tag‚ we can change the output, which is very well described here: https://wordpress.stackexchange.com/questions/38319/how-to-add-defer-defer-tag-in-plugin-javascripts/38335#38335
With that it gets easy to add a defer and / or an async tag or any other desired attribute.
If you want to link to an image from within your theme folder, one way of doing so goes like this:
|
1 |
<img src="<?php bloginfo('stylesheet_directory'); ?>/image-folder/image.jpg"> |
source:
or:
|
1 |
<img src="<?php echo esc_html( get_template_directory_uri() );?>/images-folder/image.png" alt="<?php echo esc_html( bloginfo( 'name' ) ); ?> - <?php echo esc_html( bloginfo( 'description' ) ); ?>"> |
Create a new file:
|
1 |
cat > filename.txt |
source: https://www.wikihow.com/Create-and-Edit-Text-File-in-Linux-by-Using-Terminal
Working with vim
source: https://stackoverflow.com/questions/11828270/how-to-exit-the-vim-editor
To switch between editing and command mode in vim hit the ‚i‘ key to edit text (insert) or the escape key to enter commands which start with a colon, like :q.
Clear Terminal Window:
|
1 |
reset |
or
|
1 |
tput reset |
which is mentioned to be faster. source: https://askubuntu.com/questions/25077/how-to-really-clear-the-terminal
With arrows up or down you can step through a list with your last commands. By adding the first letter(s) of your desired command you can get there very quickly.
enter a directory with a given name:
|
1 |
cd directory-name |
enter via absolute path, from anywhere to anywhere:
|
1 |
cd /path/to/directory |
list files and directories:
|
1 |
ls |
list hidden files and directories:
|
1 |
ls -ld .* |
-l use a long listing format
-d list directory entries
source: https://askubuntu.com/questions/468901/how-to-show-only-hidden-files-in-terminal
create a directory
|
1 |
mkdir |
remove a file
|
1 |
rm filename |
remove a directory with subdirectories and files
|
1 |
rm -r directory-name |
or with force
|
1 |
rm -rf directory-name |
Copy a directory:
|
1 |
cp -r source destination |
Installation: https://download.libsodium.org/doc/installation/
or: https://github.com/paragonie/sodium_compat
Quickreference: https://paragonie.com/blog/2017/06/libsodium-quick-reference-quick-comparison-similar-functions-and-which-one-use
Halite makes it easy to use Libsodium: https://github.com/paragonie/halite
