1function my_function() {
2 // code goes here
3}
4
5add_shortcode('my_shortcode', 'my_function');
my_shortcode is now the name of your shortcode, and my_function is the PHP function that it will run
Making a plugin out of it is simple, add a Header comment to the top of the file
1<?php
2/**
3 * @package My_Plugin
4 * @version 0.0.1
5 */
6/*
7Plugin Name: My Awesome Plugin
8Plugin URI: https://github.com/aamnah/wordpress-shortcode-starter
9Description: This is a starting point for a basic plugin that adds a shortcode you can use
10Author: Aamnah Akram
11Version: 0.0.1
12Author URI: https://aamnah.com/
13*/
Now you can Activate or Deactivate the plugin from the WordPress Dashboard
As a JavaScript developer, i don’t know much PHP. I cheated by adding <script> and jQuery
1function popular_users() {
2 ?>
3 <script>
4 let avatarSize = 240 // getting double size to account for retina screens
5 let userCount = 56
6 let containerHeight = (avatarSize / 2) * 4
7
8 // Only get enough users based on user's device (dont get 56 users on mobile if we only have the space to show 15)
9 // we only get results in odd numbers
10 if (window.innerWidth > 1440) {
11 userCount = 84
12 } else if (window.innerWidth < 769) {
13 userCount = 36
14 avatarSize = 160 // will be 80px when displayed (retina adjustment)
15 containerHeight = (avatarSize / 2) * 4
16 } else if (window.innerWidth < 1025 ) {
17 userCount = 48
18 avatarSize = 160
19 containerHeight = (avatarSize / 2) * 4
20 }
21
22 // TODO: fix the above values, something is of, it's getting more than required users
23 // TODO: decrease avatar size on mobile devices so that we can show more users (85px seems to fit 5 users in a row)
24
25 let endpoint = `https://www.mydomain.com/Snapshot/landing-grid-mobile?count=${userCount}`
26
27 // Fetch Users
28 async function getPopularUsers(url) {
29 let response = await fetch(url)
30 return await response.json()
31 }
32
33 // Add the container for showing the users in
34 // adding this here so the styles needed to show the users are contained here and not in Divi's Advanced CSS tab (future proofing)
35// jQuery("#popularUsersContainer").append(`<div id="popularUsers" style="max-height: ${containerHeight}px; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center;></div>`)
36// jQuery('<div/>', {
37// id: 'popularUsers'
38// }).appendTo('#popularUsersContainer');
39
40
41 users = document.createElement('div');
42 users.setAttribute("id", "users");
43 let htmlData;
44 // Populate webpage
45 getPopularUsers(endpoint).then(data => {
46 console.info(data);
47 htmlData = data.map(user => {
48 let { Id, Username, Filename, CropX1, CropY1, CropWidth, CropHeight, Rotation } = user
49 let xOffset = CropX1 + CropWidth;
50 let yOffset = CropY1 + CropHeight;
51 let crop = `${CropX1},${CropY1},${xOffset},${yOffset}`
52 let avatar = `https://images.mydomain.com/${Filename}?width=${avatarSize}&autorotate=true&crop=${crop}&rotate=${Rotation}&mode=max`
53
54 return `<img class="popularUsers-user" src="${avatar}" alt="${Username}" style="width: ${avatarSize/2}px; height: ${avatarSize /2}px"/>`
55 })
56 })
57
58 <?php echo htmlData; ?>
59
60 </script>
61
62<?php
63}
64
65add_shortcode('popularUsers', 'popular_users');
But then because it’s a <script>, it just adds the code (all of it including comments) to the HTML