How to Add Custom Code to Your WordPress Site (It's Easier Than You Think!)

to write PHP, CSS y HTML5 para modificar un sitio de WordPress puede resultar bastante frustrante, pero una buena guía puede hacerlo más fácil. Esta no es esa guía. Se trata solo de cómo agregar el código a su sitio una vez que ya está hecho. A pesar de todo, no se preocupe, eso es igual de importante. Como hay bastantes formas de hacerlo, es útil conocer las diferencias entre las distintas opciones. Pero primero, dos advertencias:

1. Before modifying anything, please make a backup copy. In fact, keep supporting their work throughout the process. At the same time it is useful to have a separate file into which to paste discarded or soon-to-be-used code snippets.
2. If you installed someone else's theme, never add code to the functions.php or style.css records. If you do, when the theme is updated, all your hard work will be gone.

Throughout the rest of this article, I'll explore a few alternatives, ordered from the simplest to the most complex.

WordPress plugins

Así como existen múltiples tipos de modificación de código, existen múltiples tipos de complementos de código personalizados. Los 2 tipos más comunes son PHP y CSS. Como sabrá, PHP gobierna la arquitectura y la función de WordPress. Por lo tanto, si está intentando modificar las funciones principales de su sitio Web, agregue o modifique una función, there are many PHP plugins available for download to help you with that.

In the same way, you probably know what CSS does at the same time: it beautifies things. And if that's all you want to modify, Custom CSS plugin le permitirá hacer eso con la mínima molestia. Al acecho en segundo plano está JavaScript, que dispone de una relación compleja con los complementos. Para aclarar, es un poco diferente debido a que funciona increíblemente bien si lo agrega al encabezado, al pie de página o un tema secundario, pero para usarlo en una publicación, debe usar un complemento especial. Algo como CSS and JavaScript toolbox should do the trick. As a side note, for the sake of your page speed, it's best to put it in the footer.

Write your own plugins

Hay un montón de fragmentos de código de WordPress disponibles en Internet para cambiar, deshabilitar o modificar ciertas funciones. A pesar de todo, saber dónde colocarlos es fundamental para la funcionalidad. A modo de ejemplo, si tiene un fragmento que modifica la función de un complemento, querrá que funcione sin importar el tema que haya activado. Lo mismo ocurre con los fragmentos que se ocupan de las alteraciones en todo el sitio. Entonces, be cual sea el caso, podría ser una buena idea crear un nuevo complemento para ellos. No te preocupes, es not so intimidating it looks like.

One of the main benefits of creating a plugin is that it will allow you to activate or deactivate the plugin on demand. At the same time it makes it possible to view contextual information about the plugin on the plugin pages. The only big drawback is that anyone else who has permission to modify the site can accidentally disable it, but a severe warning should be able to prevent it.

As a side note, at the same time you can create a folder called mu-plugins in your contents de wp binder. Any PHP file inserted there will always run and cannot be enabled or disabled. This keeps custom code out of theme and plugin folders. But only do it with plugins that you always feel comfortable running in the background.

Custom CSS files

If the changes you are planning are minor, you can create a custom-style.css proceedings. If you want to preview your changes before making them, you can always use DevTools if you are running Chrome or an identical application. Another possibility is to add custom CSS through your WordPress theme. Some premium themes, like our Total frame, includes a theme panel option to add custom CSS where you can easily find and modify it. At the same time, when you update your theme, your theme's panel settings shouldn't change, so your custom CSS will remain intact.

Remember that CSS cascades backwards, which means that rules that appear later always take precedence over rules that appear earlier. So any CSS applied to a separate sheet will override the page's default code. That at the same time applies to CSS embedded in ...

WordPress Kids Themes

Para los no iniciados, un tema hijo hereda la funcionalidad de otro tema, lo que le posibilita modificar su diseño a voluntad (puede aprender todo lo que quiera saber en nuestra guía de temas secundarios de WordPress). Fueron inventados con el propósito específico de permitirle modificar un tema sin perder los cambios al actualizar. Los temas secundarios reflejan todos los cambios que realiza en el tema externo o «principal». Así que, como aplicar un efecto de capa de Photoshop, de hecho no está editando el contenido; puede eliminarlo en cualquier momento para que las cosas vuelvan a ser como estaban.

Crear un tema hijo cuando desee modificar su código le ahorrará muchos dolores de cabeza y es bastante fácil (a medida que avanzan las modificaciones de WordPress). Simplemente acceda a su sitio a través de FTP y cree una carpeta, luego cree una style.css file that corresponds to that folder. It is standard practice to name it theme-name-child. After that, all you need is a line on your new style.css's header to determine the template. But at the same time there are some useful things to have, which can be found in the WordPress Codex Page.

Then make any necessary changes to the current theme below the @to import line. The only downside to secondary themes is the amount of research you have to do on the main theme before you can modify it, without causing any freaks or weird side effects. And remember that with child themes, you just need to specify what will be different from the original theme. To apply the changes, simply ZIP, upload it through the Appearances> Themes page in your WordPress dashboard and activate it through WordPress. This is assuming your main theme is loaded at the same time, of course.

Showing code

Hay un tipo más de agregar código que no hemos cubierto: mostrarlo. Si es diseñador web y le gustaría mostrar cómo se hace algo, presentado de una manera que los espectadores puedan copiar y pegar, es importante anotarlo de la manera correcta. La forma en que WordPress interpretará su código depende de si utiliza la sección HTML de Visual Post Editor. Ingresarlo de forma directa en el editor visual funcionará para neutralizarlo, pero no hay forma de ponerlo en el formato adecuado o en un cuadro de código. El editor visual simplemente lo formateará de la misma manera que el texto normal. A parte de esto, el HTML editor lo convertirá en código y arruinará su sitio web. No se preocupe, puede deshacer eso.

Despite everything, there is a compromise. You can highlight and put your code in a block using the and tags, but that won't stop the code from firing. All you will do is put it in the montoype font, in a box, to show that it is officially code. To prevent it from firing, you need to change the active symbols to what is called funny character entities. The most common versions of these, and the ones that are enough to neutralize most of the code, are changing for & lt; and & gt;, respectively (you can learn more about displaying code in our post about writing custom code in your WordPress posts).

As you can see, there are many ways to add custom code to WordPress, and I encourage you to experiment, play around with them, and see which ones are right for you. Any additional ways to add custom code that I have missed? Let me know in the comments.